el-cascader省市联动增加 全部城市

这里暂弄斧一下省市二级联动的实现

先看效果吧

  1. 这是没有下拉框没有点击前的效果没有点击前的样式
  2. 点击后的效果
    点击后的效果

服务端接口提供的数据

  1. 获取所有省份列表
    在这里插入图片描述
    在这里插入图片描述
  2. 根据省份code获取所有城市列表
    在这里插入图片描述
    network 返回
    在这里插入图片描述

前端代码

	    <b>城市:</b>
        <el-cascader
          v-model="cityValue"
          :options="options"
          size="small"
          @change="handleChange"
          @active-item-change="getNodes"
          :props="props"
        ></el-cascader>
		data(){
			return {
			cityValue: [''],
		    options: [],       
		    props: {
	          value: 'code',
	          label: 'name',
	          children: 'children'
	        	}
			}
		}
  • method
methods:{
      handleChange(value) {
        this.searchData.adCode = value[1]
        this.getList()
      },
       /*获取省份*/
      async getProvinceList() {
        let { data } = await getProvinceList()
        const allCity = {
          code: '',
          name: '全部城市'
        }
        data.records.map(item => {
          this.$set(item, 'name', item.name)
          this.$set(item, 'children', [])
        })
        this.options = data.records
        this.options.unshift(allCity)
      },

      /*获取城市*/
      async getCityList(code) {
        let { data } = await getNewCityList({ code })
        this.options.map((item, i) => {
          if (item.code === code) {
            item.children = data.records
          }
        })
      },
      /*
      * 参考:https://blog.csdn.net/zhan_lijian/article/details/85343154
      * */
      getNodes(val) {
        if (val.length === 1) {
          this.getCityList(val[0])
        }
      },
      
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值