VUE Element-ui 级联选择器，自定义value label属性

「爱情、让人受尽委屈。」 2021-10-01 05:26 772阅读 0赞

## HTML 代码：  ##

<el-cascader
        v-model="dept"
        clearable 
        :options="deptPool"
        :props="SetKesDept"
        class="inp"
    ></el-cascader>

## js代码： ##

<script>
        export default {
            data(){
                return {
                    SetKesDept:{
                            value:'comDeptId',
                            label:'comDeptName',
                            children:'children'
                    },//自定义  级联选择器value label
                    deptPool: [],/* 部门池 */
                    dept: [],    /* 选中的部门 */
    
                }
            },
            methods: {
                //获取部门信息
                getDeptPool(){
                    let url = `${wdd}/organstru//selectOrganStru`;
                    this.$post(url,{}).then(retData => {
                        this.deptPool = retData.returnData;
                    })
                },
            },
            created(){
                this.getDeptPool();
            }
        }

## 注： ##

自定义 SetKesDept 对象，在对象中绑定value，label，children值

如: \{ **value**:'**id**', **label:**'**name**', **children:**'**children**' \}

发表评论取消回复

表情：

评论列表（有 0 条评论，772人围观）

还没有评论，来说两句吧...

相关阅读

相关 ElementUi中Cascader级联选择器回调问题解决

ElementUi中Cascader级联选择器回调问题解决 1，在开发中使用了Cascader级联选择器，应用于省市联动的效果，发现问题：数据回调时不显示。 2，解决

偏执的太偏执、/ 2023年07月21日 12:30/ 0 赞/ 41 阅读

相关 Vue实现省市区级联选择器，使用Elementui的Cascader级联选择器获取label值

前言：项目中的收货地址需要使用到省市区级联选择器，选择的UI框架是 Element 效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

太过爱你忘了你带给我的痛/ 2023年07月18日 14:16/ 0 赞/ 131 阅读

相关 Day19——MyBatis自定义映射级联属性操作

一. 回顾前面[Day18——准备部门表\_部门实体类\_维护关系][Day18]做好了环境搭建准备后，今天讲解MyBatis的自定义映射 [前往免费下载源码][L

喜欢ヅ旅行/ 2023年07月04日 14:02/ 0 赞/ 17 阅读

相关 ElementUI的el-cascader级联选择器各个属性的设置

比眉伴天荒/ 2022年12月26日 09:14/ 0 赞/ 243 阅读

相关 elementui 级联选择器报错 property ‘level‘ of null“

property ‘level’ of null" 数组结构不一样，父级只有name children 没有value 但子集都有 name value children

妖狐艹你老母/ 2022年12月25日 13:54/ 0 赞/ 309 阅读

相关 elementUi中的级联选择器的清空操作

<el-cascader collapse-tags style="width: 100%" v-model

喜欢ヅ旅行/ 2022年11月05日 06:28/ 0 赞/ 201 阅读

相关 element ui Cascader联级选择器获取label的值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdo

心已赠人/ 2022年10月16日 06:15/ 0 赞/ 38 阅读

相关 voinc+vue实现级联选择

需求： vonic中实现级联选择 <!DOCTYPE html> <html> <head> <title>下拉框</title>

川长思鸟来/ 2022年05月21日 01:52/ 0 赞/ 231 阅读

相关 Element-ui Cascader 级联选择器同时返回 value 和 label

1、给 cascader 组件赋值一个别名 <el-cascader ref="cascaderAddr" @change="change"> </el-cascade

一时失言乱红尘/ 2022年03月18日 13:10/ 0 赞/ 600 阅读

相关 VUE Element-ui 级联选择器，自定义value label属性

HTML 代码： <el-cascader v-model="dept" clearable :options

「爱情、让人受尽委屈。」/ 2021年10月01日 05:26/ 0 赞/ 773 阅读