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.getNameById(
                _.children,
                item,
                key,
                value
            )).filter(item => item);
            return arr;
        }).reduce((acc, cur) => {
            return acc.concat(cur);
        }, []);
    }
}
複製代碼

到這裏爲止，已經完成了樹形控件到選擇器的單向綁定

選擇器到樹形控件的綁定

remove-tag事件

如今處理選擇器的值發生改變時，樹形控件也變化。由於此時是多選，因此要在remove-tag事件中處理，具體代碼以下：

handleTagChange: function() {
    //  handleDataTransform已經在以前定義過
    this.selectedData = this.handleDataTransform(this.dataArr, 'label', 'key');
    this.$refs.tree.setCheckedKeys(this.selectedData);
},
複製代碼

change事件

經過測試發現，當在鍵盤上點擊delete時，也會刪除選擇器內選中的元素，我嘗試過綁定@keyup.delete事件，可是綁定不成功，若是使用了.native修飾符能夠監聽到事件了，可是阻止了原生刪除事件，因此也不可取。通過測試發現綁定change事件就能夠處理鍵盤的delete事件，綁定的函數和handleTagChange同樣。

優化

此時，這個樹形選擇器已經完成了～👏👏，可是，咱們還能夠進一步優化，好比

選擇項不變，不重複發請求

若是選擇後的內容與選擇前的內容同樣，再也不發生請求的處理。 在選擇器中綁定的visible-change事件能夠處理，思想是：

1. item值爲true，即展開下拉框時，把此時的值存儲下來，注意⚠️：這時候存儲下來的值必須放在一個全局變量中，函數內的變量會在每次進入這個函數時初始化，因此在下拉框收起再進來這個函數時，以前存儲的值已經沒有了。
2. 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);
        }
    }
}
複製代碼

選擇器的搜索功能

當數據量大的時候，選擇器通常都會有搜索的需求，在選擇器上封裝過的搜索功能沒法知足需求，由於樹形控件自己有搜索的函數，因此在選擇器上自定義filter-mothod事件，調用樹形控件的搜索事件便可。

handleSelectFilter: function(val) {
    this.$refs.tree.filter(val);
},
複製代碼

在樹形控件上綁定filter-node-method自定義函數，支持忽略大小寫搜索

handleTreeFilter: function(value, data) {
    if (!value) return true;
    return data.label.toUpperCase().indexOf(value.toUpperCase()) !== -1;
},
複製代碼

以上就是所有內容了，若是哪裏寫的差點意思，請告訴我哈～記得點贊👍，thanks～