elementUI 如何在el-select中写入el-tree

Tomat011

已于 2023-01-17 11:20:25 修改

阅读量437

点赞数

文章标签： vue.js elementui

于 2023-01-06 11:36:11 首次发布

本文链接：https://blog.csdn.net/Tomat011/article/details/128575886

版权

文章介绍了如何在Vue项目中将select组件的下拉选项改为tree数据结构，通过el-select和el-tree组件结合使用，实现点击树节点时设置选择器的值，并隐藏下拉框。关键代码包括数据绑定、节点点击事件处理及隐藏option标签。

摘要由CSDN通过智能技术生成

记录一下自己开发的问题，需要的小伙伴可以参考下

问题：使select框中的下拉数据改为自己想要的tree数据

解决方案：

<el-form-item label="名字:" prop="id">
            <el-select ref="selectName" clearable placeholder="" v-model="handleForm.id" @clear="handleClear" style="width: 220px">
                <!-- option标签上写hidden隐藏 -->
                <el-option hidden key="id" :value="handleForm.id" :label="name" style="height: auto"> </el-option>
                <el-tree :data="treeData" :props="DefaultProps" :expand-on-click-node="false" :check-on-click-node="true" @node-click="nodeClick"> </el-tree>
            </el-select>
</el-form-item>

data() {
        return {
            //树数据
            treeData: [],
            //回显数据
            name: '',
            DefaultProps: {
                children: 'children',
                label: 'label',
            },
        }
    },
    methods: {
        //清空
        handleClear() {
            this.name = ''
            this.handleForm.id = ''
        },
        //树节点点击事件
        nodeClick(data) {
            // 树形组件点击节点后，设置选择器的值
            this.name = data.name
            this.handleForm.id = data.id
            // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
            this.$refs.selectName.blur()
        },
    },

效果图：