Deselection of multi selection of El table of elementui and deselection of filter conflict of ref of all filters

Time:2020-2-15

The reason for writing this article: Nowadays, there is no same explanation form on the Internet (or on the Internet, so I can’t find it, or the big guy thinks it’s too simple to explain). However, I think this is a deep understanding of the underlying framework of Vue + element UI. (why should we have a deep understanding of the underlying layer? It comes from the habit left by learning Java. It’s normal to dig the underlying code.)

In the API documentation:

Clear all filters
  ref="filterTable"
    :data="tableData"
    style="width: 100%">

  

ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    
    
    
      {{ scope.row.date }}

If you want to use deselect and clear all filters at the same time, according to the API example, ref here is defined with different names.

Then I have encountered the problem of mistakenly thinking that REF = “* * *” here corresponds to different values corresponding to different key values;

In fact: no matter ref is “* *”, ref is equal to any string, just assign the key in ref {key, value}, no matter what value the key is assigned to, it will point to the unique value;

From the practical example:

In API code:

toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      }

The key of the deselected ref is named multipletable, while in the filter:

clearFilter() {
        this.$refs.filterTable.clearFilter();
      }

The name is filtertable. Here it’s just a matter of name. In the case of taking the name of key value, its corresponding value attribute is unchanged;

Therefore, it can be written as follows:

ref="multipleTable"
      tooltip-effect="dark"
      style="width: 100%"
      height="420"
      @selection-change="handleSelectionChange">
      
      
......
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    Clearfilter() {// clear all filters
      this.$refs.multipleTable.clearFilter()
    }

Attach the underlying Vue Code:

export interface Vue {
  readonly $el: Element;
  readonly $options: ComponentOptions;
  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;
  readonly $props: Record;
  readonly $ssrContext: any;
  readonly $vnode: VNode;
  readonly $attrs: Record;
  readonly $listeners: Record;
......