element ui多选表格多选选中一些数据,选中数据被放入一个数组,删除数组中的一些数据,表格的多选内容并没有变化,可以让表格多选的结果随着数组变化变化吗

时间: 2024-02-18 14:00:48 浏览: 22
当我们使用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属性,使表格的多选内容发生变化。

相关推荐

最新推荐

recommend-type

Element ui 下拉多选时新增一个选择所有的选项

项目里经常会用到,在一个多选下拉框里新增一个选择所有的选项,例如: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; [removed]...
recommend-type

Element实现表格嵌套、多个表格共用一个表头的方法

res 的 ext 属性下的三个数组 default 、 free 、 pay ,每一个数组要大的一行(这一行中,第一列是运送到的地址的名字,这里定义的是 area 属性,但后端是未给到这个字段的,可自己处理数据添加该字段
recommend-type

vue数据更新UI不刷新显示的解决办法

第一个参数为要更新数据的数组,第二个参数为要更新的数组中具体的元素下标,第三个参数为新数据 备注: 数组原型上的方法vue可直接检测到变化:push(),pop(),shift(),unshift(),splice(),sort() 二、数据为对象时: ...
recommend-type

Vue实现数据表格合并列rowspan效果

主要为大家详细介绍了Vue实现数据表格合并列rowspan效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
recommend-type

element-ui表格列金额显示两位小数的方法

主要介绍了element-ui表格列金额显示两位小数的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

MATLAB遗传算法自动优化指南:解放算法调优,提升效率

![MATLAB遗传算法自动优化指南:解放算法调优,提升效率](https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/8487939061/p208348.png) # 1. MATLAB遗传算法概述** 遗传算法是一种受生物进化启发的优化算法,它模拟了自然选择和遗传的过程。在MATLAB中,遗传算法工具箱提供了丰富的函数和类,用于创建和运行遗传算法。 **1.1 遗传算法的基本原理** 遗传算法的工作原理如下: - **初始化:**创建由随机个体组成的初始种群。 - **评估:**根据目标函数计算每个个体的适应度。 -
recommend-type

failed to register layer: ApplyLayer exit status 1 stdout: stderr: archive/tar: invalid tar header

很抱歉听到这个问题。这个错误通常是由于Docker镜像损坏或Docker存储库中缺少所需的图层引起的。您可以尝试以下几种方法来解决这个问题: 1. 清理Docker镜像和容器:使用命令“docker system prune”清理不再使用的Docker对象。 2. 检查Docker存储库:确保您正在使用可靠的Docker存储库,并检查是否存在所有必需的图层。 3. 重新下载Docker镜像:如果您确定问题是由于损坏的Docker镜像引起的,则可以尝试重新下载Docker镜像。 4. 更新Docker版本:如果您使用的是旧版Docker,则可能会出现此问题。尝试更新到最新版本的Docke
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。