基于el-cascader实现省市二级联动，全选和取消全选

最新推荐文章于 2025-05-15 23:26:34 发布

grace姐姐

最新推荐文章于 2025-05-15 23:26:34 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： elementUi el-cascader 文章标签： vue elementui

本文链接：https://blog.csdn.net/lulusGirl/article/details/113630776

需求：需要在城市列表最上方，增加“全选”选项，点击全选，选中列表所有城市，再次点击取消全选1.html部分

<el-cascader
   ref='cascader'
   v-model="cityCode"
   :options="areaOptions"
   :props="props"
    clearable
    @change="changeProblemType">
 </el-cascader>

cityCode：双向绑定最后要传给接口的值

areaOptions：选项显示的数据

props:相关配置，配置是否多选以及纠正接口返回的字段与要求字段不一致的问题

我的props配置：

props:{
          multiple:true,
          value: "adCode",//接口返回的是adCode
          label: "cityName",//接口返回的是cityName,对应的是每个选项显示的文字
          children: "children",
        },

以上，可以参考官方文档

https://element.eleme.cn/#/zh-CN/component/cascader

2.js部分

（1）首先，接口返回的数据，如果不符合el-cascader要求的数据格式（数据格式参考官网），需要对数据作处理

我这里接口返回的格式是，自定义方法转换成el-cascader需要的格式，方法如下