el-table-column选中的和刚选中的对比符合条件的勾选不符合条件的不勾选
时间: 2024-03-12 11:47:35 浏览: 177
el-table-infinite-scroll:El-Table无限滚动
5星 · 资源好评率100%
el-table-column 中选中的数据和刚选中的数据是不同的概念,而符合条件的勾选和不符合条件的不勾选可以通过自定义的方式来实现。
选中的数据是指在表格中被选中的所有行数据,可以通过在 el-table 上设置 `v-model` 来实现多选或单选,选中的数据会被绑定到指定的变量中。
而刚选中的数据是指在表格中刚刚被选中的那一行数据,可以通过监听 `row-click` 或 `row-dblclick` 事件来获取刚选中的数据。
如果需要在 el-table-column 中实现符合条件的勾选和不符合条件的不勾选,可以通过自定义列模板的方式来实现。具体的做法是在 el-table-column 中使用 `scoped-slot` 来自定义列模板,通过在模板中添加复选框或单选框,并通过绑定 `v-model` 来实现符合条件的勾选和不勾选。
举个例子,假设有一个名为 `list` 的数组,数组中每个元素包含 `name` 和 `age` 两个属性,现在需要在表格中展示这个数组,并实现年龄大于等于 18 岁的人员能够被勾选,年龄小于 18 岁的人员不能被勾选。具体的做法如下:
```html
<template>
<el-table :data="list" v-model="selectedList">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" :disabled="scope.row.age < 18"></el-checkbox>
<span>{{ scope.row.age }}</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
list: [
{ name: '张三', age: 20 },
{ name: '李四', age: 16 },
{ name: '王五', age: 25 },
{ name: '赵六', age: 14 }
],
selectedList: []
}
}
}
</script>
```
在上面的代码中,通过在 el-table-column 中使用 `scoped-slot` 自定义了年龄列的模板,添加了一个复选框和一个显示年龄的 span 标签,并通过绑定 `v-model` 实现了符合条件的勾选和不勾选。在复选框的 `:disabled` 属性中判断了年龄是否小于 18 岁,如果是则禁止勾选。同时,在 el-table 中使用 `v-model` 双向绑定了表格中选中的数据,勾选的数据会被绑定到 `selectedList` 变量中。
阅读全文