|
寫此文的緣由：現(xiàn)如今，網(wǎng)絡(luò)上，沒有同下的解釋形式（或者在外網(wǎng)，所以我沒找到，或者大佬覺得太簡單所以不屑解釋）。然而，我認(rèn)為這是對VUE+ElementUI的底層框架的理解深入化問題。（為什么要深入理解底層，來自學(xué)習(xí)java時(shí)留下的習(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>如果要同時(shí)使用取消選擇和清空所有過濾器的話，按照API的例子，這里的ref是定義了不同的名字。 那么我遇到的問題，錯(cuò)誤的認(rèn)為，ref=“***”這里對應(yīng)的是不同key值對應(yīng)的不同value； 實(shí)際上：不論這的ref=“**”，ref等于任何一個(gè)字符串，只是將ref這個(gè){key，value}中的key賦值，不論key賦給什么值，都會(huì)指向定位到唯一的value； 從實(shí)際例子上看： 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[]>;......
|
|
|
