关于element-ui中@selection-change执行两次的问题

目录

• element-ui中@selection-change执行两次
• 问题描述
• element-ui的@selection-change学习总结

element-ui中@selection-change执行两次

问题描述

行内处理数据也就是：

data="roleData.filter((data) => !serarchText || data.name.includes(serarchText))"和type="selection"

共存的时候执行出错，@selection-change执行了两次

我最近再试这段代码发现并没有执行两次，element-plus好像修复了这个？？

我暂且认为应该是行内处理数据的时候 (就是行内处理data)，每一次修改table相关数据或者变量，会重新加载数据(触发行内数据处理)从而触发table的更新，导致两次执行，一次有你操作的数据，一次是重置table。

所以有两种方法解决，第一种是不触发table的更新，还有一种是更新后，获取第一次触发的结果。

• 如果不是因为行内处理数据引起，则直接看第二种方法

第一种方法就是，改变你data的数据处理方式，不在行内进行数据处理。

第二种就是继续使用行内数据处理，table添element-ui内自带的属性 加row-key以及type="selection"添加reserve-selection，在数据更新之后保留第一次触发的数据。

• reserve-selection：仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
• row-key：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。

最近试这个:reserve-selection=“true”，会导致在搜索值变化的时候，造成所选值的更改反转之类的

element-ui的@selection-change学习总结

handleSelectionChange(val) { this.multipleSelection = val; }

//val 为选中数据的集合

通过this.multipleSelection.prop字段 取得每一个选项的值，prop字段就是表格里面子项的prop值。

this.multipleSelection.length为选择了多少项。 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。