elementui树形下拉框

383 阅读1分钟
  • 在做项目的时候,需要用到树形下拉框以供用户选择,发现elementui的下拉框select组件不支持树形数据。于是在上网收集资料后,参考文章zhuanlan.zhihu.com/p/451644989… 整理一下自己的实现过程。

select组件

  • v-model的值为当前select被选中的el-option的value属性值,一般这个value属性值是用于传给后端的
  • el-option中的label属性代表要展示的值,value属性代表要传给后端的值,
<template>
    <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
</template>

<script>
    export default {
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }],
                value: ''
            }
        }
    }
</script>

tree组件

  • data属性:嵌套的数组,表示属性数据
  • props属性:指定属性数组的children字段和label字段
  • node-click事件: 点击选项后触发的事件
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
    export default {
        data() {
            return {
                data: [{
                    label: '一级 1',
                    children: [{
                        label: '二级 1-1',
                        children: [{
                            label: '三级 1-1-1'
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        },
        methods: {
            handleNodeClick(data) {
                console.log(data);
            }
        }
    };
</script>

树形下拉框

  • 在el-select中嵌入el-tree
  • 点击tree组件后,获取到选项名称chooseName,渲染到el-select中
<el-select placeholder="选择设备名称" v-model = "chooseName" :data = "deviceTree" clearable  @clear="handleClear"   ref="selectUpResId">
  <el-option
     hidden
    :label = "chooseName"
    :key = "device_id" 
    :value = "chooseName">
  </el-option>
  <el-tree :data = "deviceTree" :props = "deviceTreeProps" @node-click="handleDeviceTreeClick" :check-on-click-node="true" :expand-on-click-node="false"></el-tree>
</el-select>


export default {
    data() {
        chooseName: "",
        device_id: "",
    }
    methods: {
        handleDeviceTreeClick(data) {
            this.chooseName = data.equipmentName,
            this.device_id = data.id;
        }
    }
}