树形弹窗选择框/vue2/Element/弹框选择

已于 2024-09-11 17:05:36 修改
阅读量572 收藏 4
点赞数 10
文章标签： vue.js 前端 javascript elementui
于 2024-09-11 16:44:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45947497/article/details/142142435
版权

前言

此类选择器根据vue+elementUI实现，使用vue3的可以根据此案例稍作改动即可实现，主要功能有弹出选择、搜索过滤、搜索结果高亮等，此选择器只支持单选，如需多选可在此基础进行改造。

效果图

代码实现

使用时，props-value必须要传，并且要保证其唯一性！！！

HTML

<!-- 
 * @description: 通用树形弹窗选择框
 * @fileName: treeDialogSelect/index.vue 
 * @author: tan 
 * @date: 2024-09-10 16:31:49
 * @Attributes: data	展示数据	array
                value 展示在输入框的值
                props	配置选项，具体配置可以参照element ui库中el-tree的配置	object
                expand-first-level 当根节点只有一个是，是否展开，默认为是
                search-highlight 是否开启搜索高亮，默认开启，仅在slot-tree不传入时生效
                onFilter 自定义过滤规则，参数为:
                    value 搜索框的值
                    data 原始数据
                    callback 回调函数 接受一个参数类型boolean  为是否展示该节点 
                !!!!!必传!!!!!! props-value	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 !!!!!!
!-->
<template>
    <div class="treeDialogSelectCom">
        <slot :value="value" v-if="$slots.default"></slot>
        <el-input
            v-else
            v-bind="$attrs"
            :value="valueFilter(value)"
            suffix-icon="el-icon-arrow-down"
            :placeholder="$attrs['placeholder'] || '请选择'"
            :clearable="$attrs['clearable'] || true"
            class="treeDialogSelectInput"
            @focus="open"
            @clear="selectClear()"
        ></el-input>
        <el-dialog
            :visible.sync="visible"
            :width="$attrs['width'] || '50vw'"
            :append-to-body="true"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="$attrs['dialog-title'] || '请选择'"
        >
            <div class="treeDialogBody">
                <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable>
                    <slot slot="prepend" name="prepend"></slot>
                </el-input>
                <div class="treeDialogBodyTree">
                    <el-tree
                        v-bind="$attrs"
                        :data="data"
                        :props="props"
                        @node-click="handleNodeClick"
                        :check-strictly="$attrs['check-strictly']"
                        :icon-class="$attrs['icon-class']"
                        :lazy="$attrs['lazy']"
                        :load="$attrs['load']"
                        :node-key="props.value"
                        :filter-node-method="filterNode"
                        :default-expanded-keys="defaultExpandedKeys"
                        ref="myTree"
                    >
                        <template slot-scope="{ node, data }">
                            <slot :node="node" :data="data" name="tree">
                                <span class="slotSpan">
                                    <i v-show="!node.disabled && filterText" class="el-icon-warning"></i>
                                    <span>
                                        <span v-html="searchHighlightFilter(node, data)"></span>
                                        <b v-if="$attrs['show-count'] != undefined && data[props.children]">（{{ data[props.children].length }}）</b>
                                    </span>
                                </span>
                            </slot>
                        </template>
                    </el-tree>
                </div>
            </div>
            <div class="footer">
                <el-button type="primary" plain @click="selectClear()">清 空</el-button>
            </div>
        </el-dialog>
    </div>
</template>

JS

export default {
    props: {
        value: {
            type: undefined,
            default: null,
        },
        data: {
            type: Array,
            default: () => new Array(),
        },
        props: {
            type: Object,
            default: () => {
                return {
                    label: 'label',
                    value: 'value',
                    children: 'children',
                };
            },
        },
    },
    data() {
        return {
            defaultExpandedKeys: [],
            visible: false,
            filterText: '',
        };
    },
    created() {
        this.propsInit();
    },
    mounted() {
        setTimeout(this.initData, 10);
    },
    beforeUpdate() {
        this.propsInit();
        this.initData();
    },

    methods: {
        open() {
            this.visible = true;
        },
        initData() {
            let newItem = this.recurrenceQuery(this.data, this.props.value, this.value);
            if (newItem?.length) {
                if (this.props.value && newItem[0][this.props.value]) {
                    this.defaultExpandedKeys = [newItem[0][this.props.value]];
                }
                this.$nextTick(() => {
                    if (this.$refs.myTree?.setCurrentNode) this.$refs.myTree.setCurrentNode(newItem[0]);
                });
            } else {
                if (this.data.length == 1 && this.$attrs['expand-first-level'] !== false) {
                    this.defaultExpandedKeys = [this.data[0][this.props.value]];
                }
            }

            this.$forceUpdate();
        },

        // 单选事件
        handleNodeClick(data, e) {
            if (this.props.disabled && e.disabled) {
                return false;
            } else {
                if (data[this.props.children] && data[this.props.children]?.length) {
                    return false;
                }
            }

            this.$emit('input', data[this.props.value]);
            this.visible = false;
            this.$emit('change', data, e);
        },
        //   递归查找通用方法
        recurrenceQuery(list, key, value) {
            if (!list || !key || !value) return [];
            let queryData = [];
            list.map(item => {
                if (item[this.props.children] && item[this.props.children].length) {
                    queryData.push(...this.recurrenceQuery(item[this.props.children], key, value));
                }
                if (item[key] == value) {
                    queryData.push(item);
                }
                return item;
            });
            return queryData;
        },

        selectClear(flag) {
            if (!flag) {
                this.$emit('input', '');
                this.$emit('change', null, null);
            }
            this.$refs.myTree.setCurrentKey(null);
            this.remoteMethod('');
        },
        getCheckedNodes() {
            if (this.value !== null && this.value !== undefined && this.value !== '') {
                return this.$refs.myTree.getCheckedNodes();
            }
            return [];
        },
        getCurrentNode() {
            if (this.value !== null && this.value !== undefined && this.value !== '') {
                return this.$refs.myTree.getCurrentNode();
            }
            return null;
        },
        valueFilter(val) {
            let res = '';
            [res] = this.recurrenceQuery(this.data, this.props.value, val);
            return res?.[this.props.label] || '';
        },
        propsInit() {
            this.props.label = this.props.label || 'label';
            this.props.value = this.props.value || 'value';
            this.props.children = this.props.children || 'children';
        },

        remoteMethod(query) {
            this.$refs.myTree.filter(query);
        },
        filterNode(value, data) {
            if (!value) return true;
            let result = true;

            if (this.$listeners.onFilter) {
                this.$emit('onFilter', value, data, res => {
                    result = res;
                });
            } else {
                result = data[this.props.label].indexOf(value) !== -1;
            }
            return result;
        },
        searchHighlightFilter(node, data) {
            let { label } = this.props;
            if (this.$attrs['search-highlight'] === false) return data[label];
            if (!this.filterText) return data[label];
            const regex = new RegExp(this.filterText, 'gi');
            let text = data[label].replace(regex, match => {
                return `<strong class="highlight">${match}</strong>`;
            });
            return text;
        },
    },

    watch: {
        value: {
            deep: true,
            handler(val) {
                if (!val) {
                    this.selectClear(true);
                }
            },
        },
        filterText(val) {
            this.$refs.myTree.filter(val);
        },
    },
};

CSS

.selecTree {
    max-height: 50vh;
    overflow: auto;
    padding: 5px;
    ::v-deep .el-tree-node__content {
        font-size: 14px;
    }
}
::v-deep.slotSpan {
    font-size: 14px;
    > i {
        color: #67c23a;
        margin-right: 5px;
    }
    b {
        font-weight: normal;
        font-size: 12px;
        color: #999;
    }
    .highlight {
        color: #67c23a;
    }
}

.treeDialogBody {
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    ::v-deep .el-input__validateIcon {
        display: none;
    }
    ::v-deep .treeDialogBodyTree {
        flex: 1;
        overflow: auto;
        padding: 12px 8px;
        margin: 12px 0;
        background-color: #f5f7fa;
        border-radius: 5px;
        .el-tree {
            background: transparent;
            .el-tree-node__content:hover {
                background-color: #eaeef4;
            }
        }
    }
}
.footer {
    text-align: right;
}

使用案例

<template>
    <treeDialogSelect
        v-model="treeDialogSelectVal"
        :data="treeDialogSelectData"
        show-count
    ></treeDialogSelect>
</template>

<script>
import treeDialogSelect from '@/components/treeDialogSelect';
export default {
    components: { treeDialogSelect },
    data() {
        return {
            treeDialogSelectValue: '',
            treeDialogSelectData: [
                {
                    id: 1,
                    label: '一级 1',
                    children: [
                        {
                            id: 4,
                            label: '二级 1-1',
                            children: [
                                {
                                    id: 9,
                                    label: '三级 1-1-1',
                                },
                                {
                                    id: 10,
                                    label: '三级 1-1-2',
                                },
                            ],
                        },
                    ],
                },
                {
                    id: 2,
                    label: '一级 2',
                    children: [
                        {
                            id: 5,
                            label: '二级 2-1',
                        },
                        {
                            id: 6,
                            label: '二级 2-2',
                        },
                    ],
                },
                {
                    id: 3,
                    label: '一级 3',
                    children: [
                        {
                            id: 7,
                            label: '二级 3-1',
                        },
                        {
                            id: 8,
                            label: '二级 3-2',
                        },
                    ],
                },
            ],
        };
    },
};
</script>

使用文档 

以下只列举主要属性与方法，更多具体的属性配置请移步element官网进行查看。

属性

属性名类型默认值是否必传说明
value / v-modelstring / number-是绑定值

props

object

与element保持一致

否

配置选项，具体配置可以参照element ui库中el-tree的配置

expand-first-level

booleantrue否

当根节点只有一个时，是否展开

search-highlight

booleantrue否

是否开启搜索高亮，仅在slot-tree未传入时生效

show-countbooleanfalse否若节点中存在children，则在父节点展示所属children的数量，注意但设置插槽时 show-count将失效

事件

事件名称说明回调参数

change

当选择项发生改变时触发共两个参数，依次为：当前节点的数据，当前节点的 Node 对象

onFilter

当过滤框输入的值改变时触发

共三个参数，依次为：搜索框的值，当前节点的数据，回调函数callback， 接受一个参数类型boolean，表示是否展示该节点

插槽

name说明

-

页面展示的输入框slot，如果传入默认插槽，则会不显示默认el-input，参数为 { value }

prepend

弹窗中过滤文本框的顶部插槽

tree

自定义树节点的内容，参数为 { node, data }
小谭鸡米花
关注
element 弹窗在弹出后鼠标还可以点击页面其他元素
虎康的博客
12-04 579
如下图所示，在点击弹出弹框后，支持如下需求。
Vue+Element 用同一个el-dialog弹框完成新增和编辑操作
热门推荐
liona_koukou的博客
05-22 2万+
在实际业务中我们往往选择用同一个弹框组件来同时实现新增和编辑操作。但el-dialog弹框的visible.sync设置显示和隐藏往往带来很多额外的工作：处理数据的变更，带校验表单的内容移除和校验清除等 这需要我们在各种隐藏的bug里耗费很多精力，处理难度会随着表单内容复杂程度的增加不断提高。（实际业务场景中经常出现非常复杂的表单页面） 下面的例子使用v-if既保证数据干净每次都是新弹框不存在数据遗留和互相污染，又保留弹框弹出效果让整个调用逻辑非常简单 不用担心...
vue输入框 tree树展示
qq_39047060的博客
07-16 144
【代码】vue输入框 tree树展示。
Vue + elementUi 组件
可爱不能当饭吃
03-12 1221
一、树形控件(el-tree) + Icon 图标实现带图标的菜单栏 1. 页面布局 <template> <!-- 菜单信息 --> <nav> <el-tree class="filter-tree" :data="items" node-key="path" :props="defaultProps"
Element树型下拉框/vue2树型下拉框/TreeSelect/树型下拉
小谭鸡米花的博客
03-08 7542
今天小谭要给大家分享的是基于element ui 的下拉框和树型控件二次分装的树型下拉框，element plus新增了这一组件，但是对于还在使用vue2的我来说，就很不友好。
vue编辑弹窗（简）
Sunshinedada的博客
12-01 1986
vue编辑弹窗（简） 列表 html: <el-table :data="tableData" style="width: 100%" class="view_table"> <el-table-column prop="updateTime" label="添加时间" align="center" min-width="150" ></el-table-column> <el-table-column prop
Vue+ElementUI 在弹出框modal中写树形控件的布局class
栀妹儿的炼丹炉
04-09 1321
我在弹出框中写了个树形结构： 但是想要让可点按钮“设置积分返点”居右，我的代码片片： <Modal v-model="modal1" title="设置积分返点" style="text-align:center"> <el-select v-model="oneClassSel" placeholder="请选择" size="mini" style="text-ali...
vue2+Element表格实现跨页多选功能
myeye520的博客
04-10 1224
在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。注意此处很重要，用你每行数据的唯一值，此处我用的activityId，一般数据的唯一值应该是id。错误原因就是未能保证表格dom彻底加载后再使用toggleRowSelection方法，当然这种一般只在弹窗内表格这种场景才会出现，上述《三：数据回显》已经处理了这种问题。仅对 type=selection 的列有效，类型为 Boolean，为 true则会在数据更新之后保留之前选中的数据（需指定 row-key）
Element ui 穿梭框（2）改造之--左侧树结构
ddsuuny的博客
08-25 2143
element ui 穿梭框
vue+elementUI小工具（加载进度条、穿梭框、Dialog定位、2种selectTree等，持续更新）
qq_16785561的博客
11-08 2626
记录一下自己开发的小插件。
Element表格某一单元格使用popover弹窗+tree树控组件赋值
weixin_54757930的博客
08-21 712
<template slot-scope="scope"> <el-popover width="264" trigger="click" ref="popover" > <el-input prefix-ic
vue电商后台管理系统——主页（二）——完成权限管理功能
Minnor的博客
06-13 1394
权限管理中的权限列表+角色列表，增删改很多都和上一个功能时的写法一样
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 437
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
el-input设置type=‘number‘和v-model.number的区别
weixin_46394325的博客
09-11 510
el-input设置type=‘number’和.number修饰符的区别
Vue Router push方法的使用
最新发布
ithongchou的博客
09-13 763
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 553
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
vue组件通信，点击传值，动态传值（父传子，子传父）
爱敲代码的卡拉米的博客
09-12 660
通过上面的例子，你应该对Vue中如何使用按钮来传递值（通过内部方法或组件间通信）有了基本的了解。记得Vue的数据绑定和组件通信机制是构建Vue应用的关键。
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
qq_60281421的博客
09-11 542
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值