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[]>;......