element-ui中@selection-change事件为何会触发两次执行？

本文共计1384个文字，预计阅读时间需要6分钟。

目录 + Element-UI 中 @selection-change 事件执行两次 + 问题描述 + Element-UI 的 @selection-change 学习总结 + Element-UI 中 @selection-change 事件执行两次 + 问题描述 + 行内数据处理也是：

data=roleData.filter((data)=> !searchText || d)

目录

• 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好像修复了这个？？

<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”，会导致在搜索值变化的时候，造成所选值的更改反转之类的

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

<template> <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div> </template>

<script> export default { data() { return { tableData3: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], multipleSelection: [] } }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; } } } </script>

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

//val 为选中数据的集合

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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。