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

「爱情、让人受尽委屈。」 2021-10-01 05:26 748阅读 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 条评论，748人围观）

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

相关阅读

相关前端级联选择器的实现

使用场景下拉选择器存在多级的场合，并且一级下面必须有二级。前端代码 <el-form-item label="费目名称" prop="expenseI

青旅半醒/ 2024年04月01日 15:24/ 0 赞/ 70 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 voinc+vue实现级联选择

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

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

相关 Vue.js+element+es6（递归级联选择器）

[https://blog.csdn.net/xm\_w\_xm/article/details/81413192][https_blog.csdn.net_xm_w_xm_a

叁歲伎倆/ 2022年04月11日 11:16/ 0 赞/ 268 阅读

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

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

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

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

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

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