寫此文的緣由：現(xiàn)如今，網(wǎng)絡(luò)上，沒有同下的解釋形式（或者在外網(wǎng)，所以我沒找到，或者大佬覺得太簡單所以不屑解釋）。然而，我認(rèn)為這是對VUE+ElementUI的底層框架的理解深入化問題。（為什么要深入理解底層，來自學(xué)習(xí)java時留下的習(xí)慣，挖底層代碼是常態(tài)）
在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是定義了不同的名字。
那么我遇到的問題，錯誤的認(rèn)為，ref=“***”這里對應(yīng)的是不同key值對應(yīng)的不同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值名叫什么什么的情況，其對應(yīng)的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[]>;......
