ElementUI的el-table的多选的取消选择和筛选的取消所有过滤器之ref冲突问题
程序员文章站
2022-05-28 14:12:23
写此文的缘由：现如今，网络上，没有同下的解释形式（或者在外网，所以我没找到，或者大佬觉得太简单所以不屑解释）。然而，我认为这是对VUE+ElementUI的底层框架的理解深入化问题。（为什么要深入理解底层，来自学习java时留下的习惯，挖底层代码是常态） 在API文档中：
写此文的缘由：现如今，网络上，没有同下的解释形式（或者在外网，所以我没找到，或者大佬觉得太简单所以不屑解释）。然而，我认为这是对vue+elementui的底层框架的理解深入化问题。（为什么要深入理解底层，来自学习java时留下的习惯，挖底层代码是常态）
在api文档中：
<el-button @click="clearfilter">清除所有过滤器</el-button>
<el-table
ref="filtertable"
:data="tabledata"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
sortable
width="180"
column-key="date"
:filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
:filter-method="filterhandler"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table
ref="multipletable"
:data="tabledata"
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>
如果要同时使用取消选择和清空所有过滤器的话，按照api的例子，这里的ref是定义了不同的名字。
那么我遇到的问题，错误的认为，ref=“***”这里对应的是不同key值对应的不同value；
实际上：不论这的ref=“**”，ref等于任何一个字符串，只是将ref这个{key，value}中的key赋值，不论key赋给什么值，都会指向定位到唯一的value；
从实际例子上看：
api代码中：
toggleselection(rows) {
if (rows) {
rows.foreach(row => {
this.$refs.multipletable.togglerowselection(row);
});
} else {
this.$refs.multipletable.clearselection();
}
}
多选的取消选择定义的ref的key名叫multipletable，而筛选里：
clearfilter() {
this.$refs.filtertable.clearfilter();
}
取名叫filtertable，这里只是取名问题，取key值名叫什么什么的情况，其对应的value的属性是不变的；
所以，可以写成以下这种情况：
<el-table
:data="tabledata"
stripe
border
ref="multipletable"
tooltip-effect="dark"
style="width: 100%"
height="420"
@selection-change="handleselectionchange">
<el-table-column
type="selection"
width="55">
</el-table-column>
......
toggleselection (rows) {
if (rows) {
rows.foreach(row => {
this.$refs.multipletable.togglerowselection(row)
})
} else {
this.$refs.multipletable.clearselection()
}
},
handleselectionchange (val) {
this.multipleselection = val
},
clearfilter () { // 清空全部筛选
this.$refs.multipletable.clearfilter()
}
附上底层vue代码：
export interface vue {
readonly $el: element;
readonly $options: componentoptions<vue>;
readonly $parent: vue;
readonly $root: vue;
readonly $children: vue[];
readonly $refs: { [key: string]: vue | element | vue[] | element[] };
readonly $slots: { [key: string]: vnode[] | undefined };
readonly $scopedslots: { [key: string]: normalizedscopedslot | undefined };
readonly $isserver: boolean;
readonly $data: record<string, any>;
readonly $props: record<string, any>;
readonly $ssrcontext: any;
readonly $vnode: vnode;
readonly $attrs: record<string, string>;
readonly $listeners: record<string, function | function[]>;
......