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

grace姐姐

于 2021-02-04 18:05:24 发布

阅读量3.2k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/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/c