标签：el rows ElementUI 取消 refs readonly multipleTable key 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[]>;
......

　　

标签：el,rows,ElementUI,取消,refs,readonly,multipleTable,key,ref
来源： https://www.cnblogs.com/louis95/p/12202190.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。