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