elementUI之tree组件定制化，实现树形下拉选

最新推荐文章于 2024-09-09 11:39:31 发布
最新推荐文章于 2024-09-09 11:39:31 发布
阅读量5.8k 收藏 4
点赞数 2
分类专栏： vue 文章标签： vue elemntUI tree
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengvipin/article/details/86582576
版权

目录

 

1.demo页面

2.组件核心：JS/CSS

3.demo演示

1.demo页面

kt-select-tree-demo.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="kt-select-tree.css">
    <title>树形选择器</title>
</head>
<body>
<div id="app" v-cloak>
    <el-card>
        <div slot="header">KT-TREE-SELECT</div>
        <el-form>
            <el-form-item label="Tree Single：">
                <kt-select-tree v-model="value01"
                                :data="data"
                                :default-expanded-keys="defaultExpandedKeys"
                                :filterable="true"
                                :clearable="true"></kt-select-tree>
                <el-button type="primary" size="mini" @click="clickMe01">Submit Single!</el-button>
            </el-form-item>
            <el-form-item label="Tree Multiple：">
                <kt-select-tree v-model="value02"
                                :data="data"
                                :default-expanded-keys="['12101']"
                                :filterable="true"
                                :multiple="true"></kt-select-tree>
                <el-button type="primary" size="mini" @click="clickMe02">Submit Multiple!</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="lodash.js"></script>
<script src="kt-select-tree.js"></script>
<script>
    const APP = new Vue({
        el: '#app',
        data() {
            return {
                data: [],
                defaultExpandedKeys: [],
                // value01: '12102',
                // value02: ['12103', '12104', '12105', '12106', '12107', '12108']
                value01: 'C1',
                value02: ['C1', 'C2', 'C3']
            }
        },
        methods: {
            clickMe01() {
                alert(this.value01);
            },
            clickMe02() {
                alert(this.value02.toString());
            }
        },
        created() {
            setTimeout(() => {
                this.data = [
                    {
                        id: '1',
                        name: '中国',
                        parentId: 'G0',
                        children: [
                            {
                                id: 'S1', name: '广东', parentId: 'G0',
                                children: [
                                    {id: 'C1', name: '广州', parentId: 'S1'},
                                    {id: 'C2', name: '深圳', parentId: 'S1'},
                                    {id: 'C3', name: '佛山', parentId: 'S1'}
                                ]
                            },
                            {id: 'S2', name: '湖南', parentId: 'G0'},
                            {id: 'S3', name: '广西', parentId: 'G0'},
                            {id: 'S4', name: '湖北', parentId: 'G0'},
                        ]
                    }
                ];
                this.defaultExpandedKeys = this.data[0].children.map(item => item.id).concat(this.data[0].id);
            }, 800);
        }
    })
</script>
</html>

2.组件核心：JS/CSS

kt-select-tree.js
/**
 * 树形下拉选 v2.0
 *
 * -- 修改：
 * @note 取消【一维数组自动转多维数组的方法】
 * @note 不再区分 【静态数据和动态数据的绑定方式】
 *
 * -- 新增
 * @note 提供multiple:true && filterable:true 下的可搜索多选
 * @note 提供slot树节点内容自定义
 * @note 简化代码
 *
 */
let html = `
    <el-popover
            ref="popover"
            popper-class="kt-select-tree__popover"
            placement="bottom-start"
            trigger="click">
        <!-- 显示content -->
        <div>
            <el-input class="kt-select-tree__input" v-if="filterable" placeholder="请输入关键字" v-model="searchValue" size="mini"></el-input>
            <el-tree 
                    ref="tree"
                    class="kt-select-tree"
                    :style="{'min-width':treeWidth}"
                    :data="treeData"
                    :props="dynaDefProps"
                    :node-key="dynaDefProps.id"
                    @node-click="onNodeClick"
                    :highlight-current="!multiple"
                    :expand-on-click-node="false"
                    :default-expanded-keys="defaultExpandedKeys"
                    :show-checkbox="multiple"
                    :default-expand-all="defaultExpandAll"
                    :filter-node-method="onTreeFilter"
                    @check="onCheck">
                 <span class="kt-select-tree_label" slot-scope="{ node, data }">
                    <slot :node="node" :data="data">{{ node.label }}</slot>
                 </span>
            </el-tree>
        </div>
        <!-- 触发html -->
        <el-select 
                   ref="select"
                   slot="reference"
                   popper-class="kt-select-tree__option"
                   :style="{'width':width}"
                   v-model="labelValue"
                   :size="size"
                   :multiple="multiple"
                   :clearable="clearable"
                   :collapse-tags="collapseTags"
                   :placeholder="placeholder"
                   @change="onChange"
                   @clear="onClear">
        </el-select>
    </el-popover>
`;

Vue.component('kt-select-tree', {
    template: html,
    // 设置绑定参数
    model: {
        prop: 'value',
        event: 'input'
    },
    // --------------------------------------------------- 一般属性 --------------------------------------------------
    data() {
        return {
            // 传参的值
            modelValue: void 0,
            // 展示框的值
            labelValue: void 0,
            // 搜索框的值
            searchValue: void 0,
            // 树节点宽度
            treeWidth: 'auto',
            // 扁平化数据
            options: []
        }
    },
    // --------------------------------------------------- 传值属性 --------------------------------------------------
    // ****传入的prop中的值是不允许改变的****
    props: {
        data: Array,
        value: String | Array,
        defaultProps: Object,
        // 对外暴露的属性
        width: String,
        size: {
            type: String,
            default: 'mini'
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        multiple: {
            type: Boolean,
            default: false
        },
        filterable: {
            type: Boolean,
            default: false
        },
        clearable: {
            type: Boolean,
            default: false
        },
        defaultExpandedKeys: Array,
        defaultExpandAll: {
            type: Boolean,
            default: false
        },
        collapseTags: {
            type: Boolean,
            default: true
        }
    },
    // --------------------------------------------------- 计算属性 --------------------------------------------------
    computed: {
        // 树节点配置选项
        dynaDefProps() {
            return Object.assign({}, {
                parentId: 'parentId',
                id: 'id',
                label: 'name',
                children: 'children',
                filter: 'filter'
            }, this.defaultProps)
        },
        // 树节点数据
        treeData() {
            if (this.data.length > 0) {
                // 备份降维模型
                this.options = this.flattenTree(this.data);
                // ⭐⭐⭐ 初始化绑定节点 ⭐⭐⭐
                this.$nextTick(() => {
                    // ⭐⭐⭐ value -> modelValue
                    if (this.multiple) {
                        if (Array.isArray(this.value) && this.value.length > 0) {
                            this.labelValue = this.options.filter(node => this.value.includes(node[this.dynaDefProps.id])).map(node => node[this.dynaDefProps.label]);
                            this.$refs.tree.setCheckedKeys(this.value);
                            this.modelValue = this.value;
                        }
                    } else {
                        if (this.value) {
                            this.labelValue = this.options.filter(node => node[this.dynaDefProps.id] === this.value).map(node => node[this.dynaDefProps.label])[0];
                            this.$refs.tree.setCurrentKey(this.value);
                            this.modelValue = this.value;
                        }
                    }
                });
                // 初始化树模型
                return this.data;
            }
        }
    },
    // --------------------------------------------------- 监听属性 --------------------------------------------------
    watch: {
        searchValue(val) {
            this.debounceQuery(val);
        },
        modelValue(val) {
            // ⭐⭐⭐ modelValue -> labelValue
            if (val && Array.isArray(this.options) && this.options.length > 0) {
                if (this.multiple) this.labelValue = this.options.filter(node => val.includes(node[this.dynaDefProps.id])).map(node => node[this.dynaDefProps.label]);
                else this.labelValue = this.options.filter(node => node[this.dynaDefProps.id] === val)[0][this.dynaDefProps.label];
            }
            // ⭐⭐⭐ modelValue -> value
            this.$emit('input', val);
        },
        // ⭐⭐⭐ value -> labelValue
        value(val) {
            if (!val) this.labelValue = void 0;
        }
    },
    // --------------------------------------------------- 一般方法 --------------------------------------------------
    methods: {
        /* 点击节点 */
        onNodeClick(node, data) {
            if (!this.multiple) {
                // 绑定值
                this.modelValue = node[this.dynaDefProps.id];
                // 对外暴露绑定函数
                this.$emit('node-click', node, data);
                // 隐藏菜单
                this.onCloseTree();
            }
        },
        /* 点击节点复选框 */
        onCheck(node, data) {
            if (this.multiple) {
                let juniorNodes = data.checkedNodes.filter(node => !node[this.dynaDefProps.children]);
                // 绑定值
                this.modelValue = juniorNodes.map(node => node[this.dynaDefProps.id]);
                // 对外暴露绑定函数
                this.$emit('check', node, data);
            }
        },
        /* 节点过滤函数 */
        onTreeFilter(value, data) {
            if (!value) return true;
            return data[this.dynaDefProps.filter] ? data[this.dynaDefProps.label].indexOf(value) !== -1 || data[this.dynaDefProps.filter].indexOf(value.toUpperCase()) !== -1 : data[this.dynaDefProps.label].indexOf(value) !== -1;
        },
        /* 延迟过滤节点 */
        debounceQuery: _.debounce(function (val) {
            this.$refs.tree.filter(val);
        }, 800),
        /* popover菜单关闭 */
        onCloseTree() {
            this.$refs.popover.showPopper = false;
        },
        /* 下拉选value变化 */
        onChange(val) {
            if (this.multiple) {
                this.labelValue = val;
                this.modelValue = this.options.filter(node => val.includes(node[this.dynaDefProps.label])).map(node => node[this.dynaDefProps.id]);
                this.$nextTick(() => {
                    this.$refs.tree.setCheckedKeys(this.modelValue);
                })
            }
        },
        /* 单选模式下清空 */
        onClear() {
            this.modelValue = void 0;
        },
        /* 数组降维 */
        flattenTree(arr = []) {
            let result = [], copy = $.extend(true, [], arr); // 深度拷贝数组
            const fun = (arr) => {
                arr.forEach(node => {
                    result.push(node);
                    if (this.isArray(node)) fun(node[this.dynaDefProps.children]);
                    delete node[this.dynaDefProps.children];
                });
            };
            fun(copy);
            return result;
        },
        /* 判断数组 */
        isArray(data) {
            return data[this.dynaDefProps.children] && Array.isArray(data[this.dynaDefProps.children]) && data[this.dynaDefProps.children].length > 0
        }
    },
    // --------------------------------------------------- Created函数 --------------------------------------------------
    created() {
        // 获取输入框宽度同步至树状菜单宽度
        this.$nextTick(() => {
            this.treeWidth = `${(this.width || this.$refs.select.$refs.reference.$el.clientWidth) - 24}px`;
        });
    }
});
kt-select-tree.css
/* 下拉选option */
.kt-select-tree__option {
    display: none;
    padding: 0 !important;
}

/* 弹出框 */
.kt-select-tree__popover{
    margin-top: 0 !important;
    padding: 5px 0;
}

/* 搜索框 */
.kt-select-tree__input{
    padding: 0 4px 4px !important;
}

/* tree树形控件 */
.kt-select-tree {
    overflow-y: scroll;
    max-height: 350px;
}

.kt-select-tree::-webkit-scrollbar {
    z-index: 11;
    width: 6px;
}

.kt-select-tree::-webkit-scrollbar-track,
.kt-select-tree::-webkit-scrollbar-corner {
    background: #fff;
}

.kt-select-tree::-webkit-scrollbar-thumb {
    width: 6px;
    border-radius: 5px;
    background: #b4bccc;
}

.kt-select-tree::-webkit-scrollbar-track-piece {
    width: 6px;
    background: #fff;
}

/* 覆盖默认高亮效果 */
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
    background-color: #409eff !important;
    color: #fff;
}

3.demo演示

PS：完整demo以图包方式存放，右键 演示demo.gif 存储=》重命名xxx.rar=>解压即可。

zhengvipin
关注
专栏目录
ele-tree-select:基于elementUI的下拉树插件
05-13
github 说明 此插件是基于elementUI开发的下拉树组件 目前不支持单选,暂只支持多选 安装 npm i ele-tree-select -S 使用 在 main.js 中引入 import EleTreeSelect from 'ele-tree-select' import 'ele-tree-select/lib/ele-tree-select.css' Vue.use(EleTreeSelect) 属性 属性 说明 类型 是否必传 默认值 可选值 props 配置选项 object 否 见下面配置选项 -- code 作为组件的唯一标志返回 string 否 -- -- treeData 作为组件的数据传入，如果开启懒加载，需要将异步获取的数据组装成树型数据传入 array 是 -- -- clearable 是否可清空选项 boolean 否 true false ac
Element-UI 实现下拉树
weixin_44840242的博客
05-14 2380
组件调用 1 <template> 2 <!-- 行模式 --> 3 <el-form inline> 4 <el-form-item label="inline 默认："> 5 <select-tree :options="options" v-model="selected" /> ...
element select + tree
最新发布
gfei1234的博客
09-09 468
【代码】element select + tree。
elementui下拉树
m0_61890246的博客
05-24 254
【代码】elementui下拉树。
element-ui 下拉选择树
余白x的博客
03-09 2443
代码： <el-form-item label="上级部门名称：" prop="sDeptId"> <el-select v-model="addForm.sDeptName" placeholder="请选择" ref="selectReport" > <el-option :value="..
基于ElementUI实现的下拉搜索树组件
weixin_44740062的博客
12-26 1656
最近由于业务需要一个下拉搜索树,于是就有了这篇博客 写这篇博客一来希望能为没有思路的人提供一些灵感,二来希望能汲取一些大家的建议~ 话不多说上代码: <template> <div class="root"> <el-select v-model="selectShowLabel" @blur="handleBlur" @change="changeHandle" :clearable="clearable" @clear="clear" @remov
elementUI Tree 树形控件的官方使用文档
10-17
ElementUI Tree 树形控件是前端开发中常用的一种组件，它用于展示具有层次结构的数据，通常被用来表示目录、组织架构或者有嵌套关系的信息。这个组件允许用户展开或折叠节点，以便更好地管理和查看数据。在本文中，...
Vue.js组件tree实现无限级树形菜单
12-28
分享一段用 和标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下。 代码看这里喽: html代码: <div class=tree> !item.children'><a>{{item.text}}</a></li> <li role='presentation' v-...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
01-19
要展示或建立层级关系，就一定会用到树形组件了。 使用Vue + Element UI，构建出最基本的树如下图所示： 现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。 下拉菜单 将下拉菜单嵌到树节点中，使...
vue elementUI tree树形控件获取父节点ID的实例
10-18
在使用Vue.js框架结合Element UI库构建网页时，树形控件（Tree）是一个常用的组件，它能很好地展示层级化数据。当我们需要在Element UI的Tree组件中获取被选中节点的父节点ID时，需要通过一些编程技巧来实现。本篇...
ElementUI组件树
06-26
Element-Ui-Tree详解
element ui 树状结构下拉框
江湖行骗老中医
12-30 3043
配置选项:此处定义el-tree的label和children为指定属性， 如果不定义取默认，即label和children <template> <div> <el-form> <el-form-item> <el-select size="small" v-model="dictDataSelect" placeholder="请选择" ref="selectReport"> &.
使用ElementUI实现下拉树并校验
qq_43474235的博客
07-03 1028
ElementUI实现文件下拉树的功能
element做树形下拉_element-ui的下拉树实现
weixin_36216860的博客
02-01 1040
来自博客园的这篇文章我稍微改了以下，原文如果在外面设置了初始值的话，打开树再关闭树时，之前传的值就没了ref="popover"placement="bottom-start"trigger="click"@show="onShowPopover"@hide="onHidePopover">ref="tree"class="select-tree"highlight-current:styl...
Element树型下拉框/vue2树型下拉框/TreeSelect/树型下拉
小谭鸡米花的博客
03-08 7924
今天小谭要给大家分享的是基于element ui 的下拉框和树型控件二次分装的树型下拉框，element plus新增了这一组件，但是对于还在使用vue2的我来说，就很不友好。
下拉菜单实现树状结构_HTML5的WebGL实现的3D和2D拓扑树
weixin_39884074的博客
12-01 291
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观，一眼望去可以把整个树状结构数据看个大概，但是在弹力布局的作用下，其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了，那么...
Element UI 树形控件整合带图标的下拉功能菜单（tree + dropdown + input）
星海IT学习之路
07-21 2926
本文主要讲述：自定义树形控件<el-tree> 需求说明： Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的树形结构 如下： 我想要的效果是支持搜索效果的树，将鼠标悬浮后显示添加修改图标，点击图标后弹出对应页面；并且在每个文件夹前添加自定义图标。 实现效果： 实现步骤： 1、使用插槽（slot） <el-col :span="4" :xs="24"> <!--目录搜索功能--> <div cl
组件Element-UI 2实现树形下拉选择框--详解（含代码&示例）
热门推荐
qq_53322872的博客
05-14 1万+
通过element-ui 2的方式实现树形下拉选择框的效果
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhengvipin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值