element ui多选表格多选选中一些数据,选中数据被放入一个数组,删除数组中的一些数据,表格的多选内容并没有变化,可以让表格多选的结果随着数组变化变化吗
时间: 2024-02-18 17:00:48 浏览: 81
element ui select多选组件 重构
当我们使用Element UI的多选表格时,表格的多选内容是由selection属性来控制的,而非我们手动维护的数组。所以,如果我们删除数组中的一些数据,表格的多选内容并不会随之变化。
但是,我们可以手动更新selection属性,从而使表格的多选内容发生变化。具体来说,我们可以在删除数组的数据时,同时遍历表格的数据,将被删除的数据从selection属性中删除,然后重新设置selection属性的值。这样,表格的多选内容就会随着数组变化而变化了。
下面是一个示例代码,可以帮助你更好地理解:
```html
<template>
<el-dialog :visible.sync="dialogVisible" title="多选表格">
<el-table :data="tableData" :selection="selection" @selection-change="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<div slot="footer">
<el-button :disabled="closeDisabled" @click="handleClose">关闭</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
tableData: [
{ id: 1, name: '张三', age: 18, address: '北京市' },
{ id: 2, name: '李四', age: 20, address: '上海市' },
{ id: 3, name: '王五', age: 22, address: '广州市' }
],
selection: [],
closeDisabled: true,
selectedIds: [] // 保存选中数据的id
}
},
methods: {
handleSelectionChange(val) {
this.selection = val
this.closeDisabled = val.length === 0
},
handleClose() {
this.dialogVisible = false
},
handleDelete() {
// 遍历选中数据的id
for (let i = 0; i < this.selectedIds.length; i++) {
const id = this.selectedIds[i]
// 在tableData中查找对应的数据
const index = this.tableData.findIndex(item => item.id === id)
if (index !== -1) {
// 从tableData中删除对应的数据
this.tableData.splice(index, 1)
// 从selectedIds中删除对应的id
this.selectedIds.splice(i, 1)
// 从selection中删除对应的数据
this.selection.splice(i, 1)
}
}
// 更新selection属性
this.selection = [...this.selection]
}
},
watch: {
// 监听selectedIds变化
selectedIds(newVal) {
// 遍历选中数据的id
const selection = []
for (let i = 0; i < newVal.length; i++) {
const id = newVal[i]
// 在tableData中查找对应的数据
const data = this.tableData.find(item => item.id === id)
if (data) {
// 将选中的数据加入到selection中
selection.push(data)
}
}
// 更新selection属性
this.selection = selection
}
}
}
</script>
```
在上面的代码中,我们新增了一个selectedIds变量,用来保存选中数据的id。在handleSelectionChange方法中,我们将选中数据的id保存到selectedIds中。在handleDelete方法中,我们遍历selectedIds变量,找到对应的数据并从tableData中删除。在删除的同时,我们也需要从selectedIds和selection中删除对应的数据。最后,我们更新selection属性,使表格的多选内容发生变化。
在watch中,我们监听selectedIds变化,根据选中数据的id从tableData中查找对应的数据,并将选中的数据加入到selection中。最后,我们更新selection属性,使表格的多选内容发生变化。
阅读全文