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])
        }
      },
      
}