el-table-column 使用el-checkbox 勾选给当前对象增加一个属性
时间: 2023-10-24 14:09:27 浏览: 172
Vue动态生成el-checkbox点击无法赋值的解决方法
5星 · 资源好评率100%
可以使用el-table-column的scoped-slot来实现该功能。首先,在column中添加一个checkbox类型的列,指定v-model为要增加属性的变量,比如selected。然后,在该列的scoped-slot中,使用v-on:change绑定一个函数,函数中根据checkbox是否被选中来决定是否给当前对象增加该属性。具体的代码实现如下:
```
<el-table-column type="selection" v-model="selected"></el-table-column>
<el-table-column label="Name">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="Selected">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.selected" v-on:change="addProperty(scope.row)"></el-checkbox>
</template>
</el-table-column>
...
data() {
return {
selected: [],
...
}
},
methods: {
addProperty(row) {
if (row.selected) {
row.newProperty = 'value'; // 给当前对象增加一个新属性
} else {
delete row.newProperty; // 删除该属性
}
},
...
}
```
在上面的代码中,el-table-column的type属性为"selection"表示该列是一个checkbox类型的列,v-model绑定到selected变量上,表示哪些行是被选中的。另一个el-table-column中的scoped-slot中,使用el-checkbox,v-model绑定到当前行的selected属性上,当checkbox选中或取消时,会调用addProperty方法,根据当前行的selected属性来增加或删除一个新属性newProperty。注意,这里不能使用对象的原型链来增加新属性,因为如果多个对象同时被选中,它们共享同一个原型链,会互相影响。
阅读全文