iview Table组件插入全选全不选,不使用type: "selection"属性
时间: 2023-09-30 20:01:51 浏览: 103
可以使用自定义列来实现iview Table组件的全选和全不选功能,具体步骤如下:
1. 在columns数组中添加一个自定义列,如下所示:
```javascript
columns: [
{
title: '',
key: 'selectAll',
width: 60,
render: (h, params) => {
return h('Checkbox', {
props: {
value: this.checkAll,
indeterminate: this.indeterminate
},
on: {
'on-change': () => {
this.checkAll = !this.checkAll;
this.$refs.table.clearSelection();
}
}
})
}
},
// 其他列
]
```
2. 在data中添加一个checkAll属性和一个indeterminate属性,用于控制全选框的状态和样式:
```javascript
data () {
return {
checkAll: false,
indeterminate: false,
// 表格数据
tableData: [
// 数据内容
]
}
},
```
3. 在表格的selection-change事件中,根据选中的行数来更新全选框的状态:
```javascript
onSelectionChange (selection) {
if (selection.length === 0) {
this.checkAll = false;
this.indeterminate = false;
} else if (selection.length === this.tableData.length) {
this.checkAll = true;
this.indeterminate = false;
} else {
this.checkAll = false;
this.indeterminate = true;
}
}
```
这样就可以实现iview Table组件的全选和全不选功能了。
阅读全文