這篇文章主要介紹了Element UI框架中巧用樹選擇器的實現,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了Element UI框架中巧用樹選擇器的實現,分享給大家,順便給自己留個筆記,具體如下:
介紹
在Element UI框架中有選擇器和樹形控件,但是沒有樹形選擇器,也就是圖上的這種方式的選擇器,所以只能自定義選擇器的slot。這裏介紹的是多選情況,如果是單選則去掉複選框,修改一部分的處理即可。
html部分的代碼:
<el-select v-model="dataArr" :multiple="multiple" filterable :placeholder="placeholder" :disabled="disabled" :collapse-tags="multiple" @remove-tag="handleTagChange" @visible-change="handleOptionHidden" class="hi-input"> <el-option value="0" class="hidden"> </el-option> <!--el-tree綁定的數組中children裏的key值不能是0--> <el-tree ref="tree" :data="options" node-key="key" show-checkbox :default-checked-keys="selectedData" @check="handleCheckChange" :props="defaultProps"> </el-tree> </el-select>
在el-tree中綁定的值是已選擇的key值組成的數組,check綁定的事件函數是爲了:
- 得到現在樹選擇器上選中的值
- 過濾undefined、null的值(是爲了容錯處理) 具體代碼如下:
handleCheckChange: function() { this.selectedData = this.$refs.tree.getCheckedKeys().filter(_ => _); }
因爲選擇器是有label值和key值區分的,所以,每當在el-tree中選中值key值變化時,選擇器上綁定的值label值也應該隨之變化,所以在watch中監聽key值,目的是在el-tree綁定的data中找到當前key值對應的label值 具體代碼如下:
watch: { selectedData: function(newValue) { this.$nextTick(() => { this.dataArr = this.handleDataTransform(newValue, 'key', 'label'); }); }, }, methods: { getNameById(array, value, id, name, multi) { let arr = array || []; let flag; let result = arr.filter(item => { return item[id] + '' === value + ''; }); if (multi) { flag = result.map(item => { return item[name]; }); } else { let obj = result[0]; flag = name ? obj && obj[name] : obj; } return flag; }, handleDataTransform: function(source, key, value) { return this.options.map(_ => { let arr = source.map(item => this.$util.getNameById( _.children, item, key, value )).filter(item => item); return arr; }).reduce((acc, cur) => { return acc.concat(cur); }, []); } }
到這裏爲止,已經完成了樹形控件到選擇器的單向綁定,現在處理選擇器的值發生改變時,樹形控件也變化。因爲此時是多選,所以要在remove-tag事件中處理,具體代碼如下:
handleTagChange: function() { // handleDataTransform已經在之前定義過 this.selectedData = this.handleDataTransform(this.dataArr, 'label', 'key'); this.$refs.tree.setCheckedKeys(this.selectedData); },
此時,這個樹形選擇器已經完成了~:clap::clap:,但是,我們還可以進一步優化,比如:如果選擇後的內容與選擇前的內容一樣,不再發生請求的處理。 在選擇器中綁定的visible-change事件可以處理,思想是:
- item值爲true,即展開下拉框時,把此時的值存儲下來,注意:warning::這時候存儲下來的值必須放在一個全局變量中,函數內的變量會在每次進入這個函數時初始化,所以在下拉框收起再進來這個函數時,之前存儲的值已經沒有了。
- item值爲false,即收起下拉框時,判斷之前存儲下的變量值和當前變量值是否相等,如果不相等才觸發數據的更新。 具體代碼如下:
handleOptionHidden: function(item) { // 處理選中內容沒變的情況 if (item) { this.selectedItem = [...this.selectedData]; } else { // this.$util.isEqual()是判斷兩個數組是否相等函數,網上很多,請自行谷歌 if (!this.$util.isEqual(this.selectedItem, this.selectedData)) { this.handleUpdate(this.selectedData); } } },
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。