三级联动，vue cascader

三级城区联动

首先你得有一个城市JSON的code文档 点击下载

格式这样↓
代码↓

   <el-form-item label="地区" prop="region">
      <el-cascader v-model="formData.regionfie" :options="regionfieOptions" :props="regionfieProps"
                   :style="{width: '100%'}" placeholder="请选择地区" separator="," clearable></el-cascader>
    </el-form-item>




 data() {
    return {
      formData: {
       // 最终值
        regionfie: [110000, 110100,110102],
      },
      rules: {
      	// 校验
        regionfie: [{
          required: true,
          type: 'array',
          message: '请至少选择一个城区',
          trigger: 'change'
        }],
      },
      // 数据源-一般我是从后台传过来，保存上面JSON到后台然后接口传到前端
      regionfieOptions: [],
      // 定义显示效果
      regionfieProps: {
        "multiple": false,
        "value": "name",
        "label": "code"
      },
    }
  }

效果↓

注意回显是数组：
this.formData.regionfie = this.formData.regionfie.split(‘,’) //把字符串转换为数组

我保存到后台的格式为字符串：110000, 110100,110102 这样
this.formData.regionfie = this.formData.regionfie.toString() //把数组转换为字符串

完了