elementui-级联选择器相关

elementui-级联选择器赋初始值

用户在编辑的时候也要显示复选状态,下图所示:

级联选择器

之前是单选所以只返回区id即可,现在复选只返回区id集合不显示,必须返回完成id集合即
[["110000", "110100", "110101"],["120000", "120100", "120101"]]
分别代表北京/北京市/东城区和天津/天津市/和平区

2.级联选择器获取label值和value值
//value值获取正常操作即可
//label值获取
//代理区域 id="el-cascader" 的change事件
cascaderChange(e) {
    let nodes = this.$refs['cascaderAddr'].getCheckedNodes();
    if(nodes) {
        this.areasArray = agentDistrictListFun(true, nodes, e);
    }else {
        this.areasArray = agentDistrictListFun(false, nodes, e);
    }
},
/*
* agentDistrictListFun 处理新增加盟商代理区域数据格式
*  - status 考虑到elementui字段变动 所以要先判断是否有这个字段,没有的话启用备用方案=>已跟后端商量
*  - areaNames 获取到的名称集合
*  - areaIds 获取到的id集合
*/
export function agentDistrictListFun(status, areaNames, areaIds) {
    let arr = [], areas = [];
    for (var i = 0; i < areaNames.length; i++) {
        areas.push(areaNames[i].pathLabels);
    }
    for (var i = 0; i < areaIds.length; i++) {
        let small = {};
        small.provinceId = areaIds[i][0];
        small.cityId = areaIds[i][1];
        small.districtId = areaIds[i][2];
        if(status) {
            small.provinceName = areas[i][0];
            small.cityName = areas[i][1];
            small.districtName = areas[i][2];
        }else {
            small.provinceName = "province";
            small.cityName = "city";
            small.districtName = 'district';
        }
        arr.push(small);
    }
    return arr;
}

我在百度搜索答案就发现那个获取label值的字段好像在变,就写的时候打印一下this.$refs['cascaderAddr']这个看看到底是哪个。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI 中的城市级联选择器是一个非常常用的组件,可以帮助用户在一个区域选择省、市和区县。要使用城市级联选择器,你需要按照以下步骤进行设置: 1. 安装 ElementUI:首先确保你已经安装了 ElementUI,可以通过 npm 或者 yarn 进行安装。 2. 引入级联选择器组件:在你的项目中找到需要使用城市级联选择器的页面或组件,并在该页面或组件中引入级联选择器组件。在 Vue 文件中,可以使用 import 语句引入: ```javascript import { Cascader } from 'element-ui'; ``` 3. 使用级联选择器组件:在你的页面或组件中使用 Cascader 组件,并为其绑定相应的数据和事件处理方法。 ```html <template> <cascader :options="options" :props="props" v-model="selectedCity" @change="handleCityChange" ></cascader> </template> <script> export default { data() { return { options: [], // 城市数据源 props: { value: 'value', label: 'label', children: 'children', }, selectedCity: [], // 选中的城市 }; }, methods: { handleCityChange(value) { console.log('选中的城市:', value); }, }, }; </script> ``` 4. 加载城市数据源:在获取城市数据源的方法中,将数据源赋值给 options 变量,以便级联选择器组件能够正确显示和选择城市。 ```javascript import cityData from './cityData'; // 城市数据源 // ... data() { return { options: cityData, // 城市数据源 // ... }; }, ``` 5. 自定义城市数据源:你可以根据需要自定义城市数据源,以适应你的项目要求。 以上是使用 ElementUI 的城市级联选择器的基本设置步骤。你可以根据自己的需求进行相应的样式和逻辑定制。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值