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

element-ui中的table里@selection-change执行了两次

问题描述：
行内处理数据也就是:data="roleData.filter((data) => !serarchText || data.name.includes(serarchText))"和type="selection"共存的时候执行出错，@selection-change执行了两次

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

<template>
  <div>
    <div>
      <el-input clearable placeholder="搜索..." prefix-icon="el-icon-search" v-model="serarchText"></el-input>
    </div>
    <el-table border stripe
              :data="roleData.filter((data) => !serarchText || data.name.includes(serarchText))"
              :header-cell-style="{background:'#409EFF',color:'#FFF'}"
              @selection-change="handleRoleChange">
      <el-table-column align="center" type="selection" width="50" />
      <el-table-column align="center" label="ID" prop="id" width="50" />
      <el-table-column align="center" label="角色名称" prop="name" width="150" />
      <el-table-column align="center" label="角色代码" prop="code" width="120" />
    </el-table>
  </div>
</template>
 
<script lang="ts" setup>
import { reactive, ref, watch } from "vue";

const roleData = ref();
roleData.value = [
  {
    id: 1,
    code: "ROLE_TEST0_1",
    name: "测试角色3",
    enabled: true,
  },
  {
    id: 3,
    code: "ROLE_TEST0_3",
    name: "系统开发员",
    enabled: true,
  },
];
let roleSelectedData = ref([]);

let serarchText = ref();
const handleRoleChange = (value: any) => {
  roleSelectedData.value = value;
  console.log(value);//选择selection框 两次执行
};
</script>

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

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

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

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

<el-input clearable placeholder="搜索..." prefix-icon="el-icon-search" v-model="serarchText"></el-input>
<el-table border stripe
     :data="transData"
     :header-cell-style="{background:'#409EFF',color:'#FFF'}"
     @selection-change="handleRoleChange"
>
</el-table>
<script lang="ts" setup>
const roleData = ref();
roleData.value = [
  {
    id: 1,
    code: "ROLE_TEST0_1",
    name: "测试角色3",
    enabled: true,
  },
  {
    id: 3,
    code: "ROLE_TEST0_3",
    name: "系统开发员",
    enabled: true,
  },
];
let serarchText = ref();
const transData = ref([...roleData.value])
watch(serarchText,(newValue)=>{
  if(newValue){
    let tempdata = roleData.value
    transData.value = tempdata.filter((data) => !newValue || data.name.includes(newValue))
  }else{
    transData.value =roleData.value
  }
})
</script>

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

reserve-selection ：
仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

row-key：
行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。

<el-table border stripe
          :data="roleData.filter((data) => !serarchText || data.name.includes(serarchText))"
          :header-cell-style="{background:'#409EFF',color:'#FFF'}"
          @selection-change="handleRoleChange"
          :row-key="(row)=>{row.id}">
  <el-table-column align="center" type="selection" :reserve-selection="true" width="50" />
  <el-table-column align="center" label="ID" prop="id" width="50" />
  <el-table-column align="center" label="角色名称" prop="name" width="150" />
  <el-table-column align="center" label="角色代码" prop="code" width="120" />
</el-table>

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