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

前言

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

实现思路

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

js 复制代码
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与搜索树节点需要我们实现。

vue 复制代码
<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>

最终效果

相关推荐
雲墨款哥13 天前
记录:vue-next-admin 项目 element-plus 国际化包报错的解决办法
前端·element
bo5210018 天前
Element Plus 虚拟树形组件子节点点击导致勾选框自动勾选问题排查与解决
vue.js·element
JunjunZ25 天前
ElementUI Tree组件的父子节点联动实现
vue.js·element
Endeavour_T1 个月前
怎么调整Element-ui组件样式,调到崩溃!!!
element
金金金__1 个月前
Element-Plus:popconfirm与tooltip一起使用不生效?
前端·vue.js·element
卡布叻_星星2 个月前
el-tree结合el-tree-transfer实现穿梭框里展示树形数据
el-tree·element·el-transfer
Sacrifice3392 个月前
ElementUI Form 组件 `resetFields` 方法失效排查手册
element
面向对象面向君2 个月前
骨架屏不结束🏃🏻,CPU哪敢躺平🚨
css·element
hemoo2 个月前
Element UI 日期区间定制
vue.js·element
晚风3082 个月前
el-tab组件与echarts的影响
echarts·element