（vue）封装element的单选el-tree和el-select（数只允许两层）

最新推荐文章于 2024-03-13 12:00:47 发布

VIP文章民宝

最新推荐文章于 2024-03-13 12:00:47 发布

阅读量1k

点赞数

分类专栏：封装Vue的功能小库库文章标签： vue

本文链接：https://blog.csdn.net/wang_min_bao/article/details/111468366

版权

封装element的单选el-tree和el-select（树只允许两层）

1、html代码
几个点：1：className是一个特殊设置的类名，用作有多个并存时回显title使用
2：popper-class是设置下拉树类名的，下拉框的内容因为是在html上所以被这个类名包裹着。

<div class="tag_tree_select" :class="className">
    <el-select v-model="repeatedValue" @clear="clearRepeatedId" clearable popper-class="tag_tree"
        ref="repeatedElSelect" @visible-change="repeatedIdVisible">
        <el-option v-for="item in trees" :key="item.id" :label="item.name" :value="item.id">
            <el-tree :data="repeatedIdList" ref="repeatedTree" :class="haveTree ? 'have-tree' : ''"
                v-if="isReloadRepeatedId" :default-expanded-keys="expandList" :props="props" node-key="id"
                :highlight-current="true" @node-click="handleRepeatedClick">
            </el-tree>
        </el-option>
    </el-select>
</div>

2、js代码

return Vue.extend({
   
        props: {
   
            allSelectList: {
   
                type: Array
            },
            selectInitData: {
   
                type: Number
            },
            repeatedDetail: {
   
                type:String
            },
            className:{
   
                type:String,
                default:'repeated-title-class'
            }
        },
        data: function () {
   
            return {
   
                repeatedId:null,
                repeatedValue: '',//重复咨询回显
                props: {
   
                    label: 'name'
                },
                isReloadRepeatedId: false,//还原下拉框
                trees: [
                    {
   }
                ],
                props: {
   
                    label: 'name'
                },
                expandList: [],
				nodeId: null,
                haveTree: false,
            }
        },
        created() {
   

        },
        mounted