iview的table组件实现多选框变单选框,选中后其他选项禁用且点击分页再切换回来还是之前的选中与禁用状态
时间: 2024-03-09 10:45:50 浏览: 27
可以使用iview的table组件的selection-change事件监听多选框的变化,并在事件处理函数中实现将其他选项禁用的逻辑。具体实现可以参考下面的代码示例:
```html
<template>
<div>
<Table :columns="columns" :data="tableData" @selection-change="handleSelectionChange" ref="table"></Table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
}
],
tableData: [
{
name: '张三',
age: 20
},
{
name: '李四',
age: 25
},
{
name: '王五',
age: 30
}
],
selectedRowKeys: []
}
},
methods: {
handleSelectionChange(selection) {
// 如果只选中了一个选项,则将其他选项禁用
if (selection.length === 1) {
const selectedRowKey = selection[0].key
this.selectedRowKeys = [selectedRowKey]
this.$refs.table.clearSelection()
this.$refs.table.toggleRowSelection(selectedRowKey, true)
this.tableData.forEach(row => {
if (row.key !== selectedRowKey) {
this.$refs.table.disableRow(row, true)
}
})
} else {
// 否则,恢复所有选项的可选状态
this.selectedRowKeys = []
this.tableData.forEach(row => {
this.$refs.table.disableRow(row, false)
})
}
}
}
}
</script>
```
在上面的代码中,我们在Table组件上监听了selection-change事件,并在事件处理函数handleSelectionChange中实现了多选框变单选框并禁用其他选项的逻辑。具体实现步骤如下:
1. 判断是否只选中了一个选项,如果是,则将其他选项禁用,并将选中的选项保存到selectedRowKeys数组中。
2. 否则,恢复所有选项的可选状态,并清空selectedRowKeys数组。
注意:由于iview的table组件在paging事件中会重新渲染表格,因此需要在事件处理函数中保存选中状态。可以将选中的行的key保存到selectedRowKeys数组中,并在Table组件上绑定这个数组,这样在重新渲染表格时,表格的选中状态就会保持不变。