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为选择了多少项。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。