Element-ui下拉列表源码改造——下拉搜索树列表（二）

前言

这一篇是Element-ui下拉列表二次开发------虚拟下拉列表（一）的续篇，在Element2.0中有一些不满足我们日常开发的组件，就需要自己动手修改组件库中的源码。

实现思路

有两种实现方式，第一种拷贝一份下拉列表源码重新封装，这种方式代码冗余不利于后续维护，而第二种利用组件继承加方法重写的方式实现。接下来只说第二种

import { Select } from 'element-ui'

export default {
    extends: Select,
    methods: {
        setSelected() {
            Select.methods.setSelected.call(this)
            if (this.multiple) {
                var result = [];
                if (Array.isArray(this.value)) {
                    this.value.forEach(function (value) {
                        result.push({
                            ...value,
                            currentLabel: value.label
                        });
                    });
                }
                this.selected = result;
            }
        },
        handleQueryChange(val) {
            this.options[0].$children[0].filter(val)
        },
        deleteTag(event, tag) {
            this.options[0].$children[0].setChecked(tag.value, false, true);
            Select.methods.deleteTag.call(this, event, tag)
        }
    }
}

如何使用

当前组件跟element下拉列表组件使用是一样的，只是选中check与搜索树节点需要我们实现。

<template>
    <v-select v-model="defaultValue" multiple filterable placeholder="请选择">
        <el-option value="" style="height:initial;padding: 0;" @click.stop>
            <el-tree :filter-node-method="filterNode" @check="checkChange" :data="options" show-checkbox node-key="value" ref="tree" highlight-current></el-tree>
        </el-option>
    </v-select>
</template>

<script>
import vSelect from './VSelect'
export default {
    components: {
        vSelect
    },
    data() {
        return {
            options: [],
            defaultValue: '',
        }
    },
    methods: {
        checkChange(node, { checkedNodes }) {
            this.defaultValue = checkedNodes
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.toLowerCase().indexOf(value.toLowerCase()) !== -1
        }
    }
}
</script>

最终效果