ElementUI的el-table的多選的取消選擇和篩選的取消所有過濾器之ref沖突問題

寫此文的緣由：現如今，網路上，沒有同下的解釋形式（或者在外網，所以我沒找到，或者大佬覺得太簡單所以不屑解釋），然而，我認為這是對VUE+ElementUI的底層框架的理解深入化問題，（為什么要深入理解底層，來自學習java時留下的習慣，挖底層代碼是常態）

在API檔案中：

<el-button @click="clearFilter">清除所有過濾器</el-button>
  <el-table
    ref="filterTable"
    :data="https://www.cnblogs.com/louis95/p/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="https://www.cnblogs.com/louis95/p/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="https://www.cnblogs.com/louis95/p/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[]>;
......

標籤：JavaScript

上一篇：react-react中的css+評論組件

下一篇：使用gulp