正文
ElementUI的el-table的多选的取消选择和筛选的取消所有过滤器之ref冲突问题
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
写此文的缘由：现如今，网络上，没有同下的解释形式（或者在外网，所以我没找到，或者大佬觉得太简单所以不屑解释）。然而，我认为这是对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[]>;
......
