element ui省市区三级联动,及获取三级联动的name值

   <el-cascader
             ref="refSubCat"
            v-model="areaValue"
            :options="options"
            @change="handleChange">
  </el-cascader>

js

 areaValue: [],
 options:[],

模拟后台返回数据格式后修改为cascader需要的格式

 let testArr=[
        {
          name:"北京市",
          cityList:[
            {
              name:"市辖区",
              pid:"1",
              areaList:[{
                name:"东城区",
                pid:"2",
              },{
                name:"东城区2",
                 pid:"3",
              }]
            },
            {
              name:"西城区",
              areaList:[{
                name:"西城区",
                 pid:"4",
              }]
            }
          ]
        }
      ]

      let options=[]
      let cityData =JSON.stringify(testArr);
      options =JSON.parse(cityData.replace(/pid/g,"value").replace(/name/g,"label").replace(/areaList/g,"children").replace(/cityList/g,"children"));
      this.options=options
      console.log(options)

打印选中的省市区的value和name

  handleChange(value) {
       debugger
        console.log(value);
        console.log(this.$refs["refSubCat"])
        console.log(this.$refs["refSubCat"].getCheckedNodes()[0].label)
        console.log(this.$refs["refSubCat"].getCheckedNodes()[0].pathLabels)
      },

 

element ui省市区三级联动,及获取三级联动的name值

上一篇:substr和mb_substr的区别


下一篇:区间 k 大数查询