参考:https://blog.youkuaiyun.com/Vincent_zhang1949/article/details/112858215
一、发现问题
elementUI中关于el-table的表格选择改变事件与过滤器的问题
<el-table
ref="singleTable"
:data="antennaList.filter(e => e.status!=='delete')"
v-loading="antennaLoading"
highlight-current-row
border
@selection-change="handleSelectionChange"
tooltip-effect="dark"
@current-change="handleCurrentChange"
:header-cell-style="{background:'#eef1f6'}"
:key="antgainKey"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
过滤器会造成选择改变事件点击一次触发两次,第二次会清空回调参数selection中的所有的数据。
handleSelectionChange(val){
console.log(val);
this.multipleSelection = val;
},
二、解决发现问题
<el-table
ref="singleTable"
:data="antgainList_bak"
v-loading="antennaLoading"
highlight-current-row
border
@selection-change="handleSelectionChange"
tooltip-effect="dark"
@current-change="handleCurrentChange"
:header-cell-style="{background:'#eef1f6'}"
:key="antgainKey"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
使用一个中间变量存储过滤后的数据,:data=“这个中间变量”
computed:{
antgainList_bak: function(){
return this.antgainList.filter(e => e.status!=='delete')
}
},