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

时间:2021-07-22
本文章向大家介绍element ui省市区三级联动,及获取三级联动的name值,主要包括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)
      },

原文地址:https://www.cnblogs.com/shuihanxiao/p/15046441.html