©2020-2024 ioDraw All rights reserved
I'm writing the background management system recently When writing to the place of modification The previous idea was to pass the current object directly And then it's going to change
Now? vue Provided scope as well as scope.row Can let us more convenient operation data
slot-scope='scope' Define an object in the scope slot ( Here the object is defined as scope) To store the usage of the data bound on the slot
scope.row use ElementUI Table templates are used when rendering data
The slot is also used to obtain the current row data ,scope Data equivalent to one row , scope.row Data object equivalent to the current row
<el-table :data="userList" stripe style="width: 100%"> <el-table-column
prop="username"label=" full name " width="180"></el-table-column> <el-table-column
prop="email" label=" mailbox " width="180"> </el-table-column> <el-table-column
prop="mobile" label=" Telephone "> </el-table-column> <el-table-column label=" User status ">
<template slot-scope="scope"> <el-switch v-model="scope.row.mg_state"
@change="userstateChange(scope.row.id, scope.row.mg_state)"> </el-switch>
</template> </el-table-column> <el-table-column prop="adress" label=" operation ">
</el-table-column> </el-table>
:data ==》“userList”
A table is bound to an array used to store data , Every element in it is a data object
slot-scope ==》“scope”
This is an object defined in the scope slot ( Here the object is defined as scope) To store the usage of the data bound on the slot
The data object of the current row ==》 scope.row
Use here ElementUI Table template rendering data ,
" The slot is also used to obtain the current row data ,scope Data equivalent to one row , scope.row Data object equivalent to the current row
It's more convenient ~
Technology