zoukankan      html  css  js  c++  java
  • 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)
          },
  • 相关阅读:
    linux防火墙,高级策略策略实例详解(实例一)
    ftp文件共享服务详解
    使用nmap 验证多种漏洞
    powerCat进行常规tcp端口转发
    1111
    powershell下ssh客户端套件实现
    powershell加载EXE进内存运行
    44
    面对问题 认清自己
    22
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/15046441.html
Copyright © 2011-2022 走看看