Vue Element Cascader 级联选择器

 1.省市区联动

 <div class="query-item">
          <span style="padding: 0 8px 0 0">组织机构</span>
          <el-cascader
            ref="cascaderAddr"
            style="width: 150px"
            v-model="query.org"
            clearable
            placeholder="请选择"
            :show-all-levels="false"
            :key="key"
            :props="props"
          ></el-cascader>
        </div>


export default {
  name: 'dop',
  data() {
    return {
      //组织机构
      props: {
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
          const { level } = node
          var type = node.value
          if (level == 0) {
            type = ''
          }
          var nodes = []
          var param = {}
          param.nodeIdTmp = type
          getActivityOrg(param).then(res => {//接口返回数据
            if (res.success) {
              for (var i = 0; i < res.result.length; i++) {
                nodes.push({
                  value: res.result[i].orgId,
                  label: res.result[i].orgDesc
                  /*leaf: false*/
                })
              }

              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes)
            }
          })
        }
      },
 query: {
        org: '', //组织机构
        visitResults: '',
        visitTypes: ''
      },
},
methods:{
//查询表格数据
 getTableData() {
      this.vLoading = false
      var org = ''
      if (this.query.org != '' && this.query.org.length > 0) {
        org = this.query.org[this.query.org.length - 1]//当前选中节点数据
      }

      let params = {
        StartDate: this.vistStartTime,
        EndDate: this.visitEndTime,
        RESULT_ID: this.query.visitResults,
        TOUCH_ID: this.query.visitTypes,
        USER_NAME: this.USER_NAME,
        USER_NUMBER: this.USER_NUMBER,
        STRATEGY_NAME: this.STRATEGY_NAME,
        orgId: org,
        pageNum: this.pageCurrent,
        pageSize: this.pageSize
      }
      getPayVisitTableData(params).then(res => {
        if (res.code === 200) {
          this.tableList = res.result.pageList.list
          this.pageTotal = res.result.pageList.total
        }
      })

},

2.实现效果如下：

3、基本用法：

<el-cascader
  v-model="value"
  :options="options"
  @change="handleChange">
</el-cascader>

特性：1.后端返回的数据格式名称跟前端需要的名称不一致：使用:props动态改变

:props="optionProps"

optionProps: {
  value: 'id',
  label: 'name',
  children: 'problemList'
},

2.可以选择其中某一级的：

级联选择器默认只能选择最后一级的，想要选择任意一级，加上属性change-on-select

3.获取选择的该级的数据id：

方法changeProblemType获取的数据是个数组，若是只想要选择的该级的数据id，通过遍历该数组获取最后一个数值。

@change="changeProblemType"

changeProblemType(value){
  console.log(value)
},

let lengths = this.formName.problemType.length;
let problemType_data = this.formName.problemType[lengths-1];

 4.当最后一级为空数组时，选择框还是显示出来了，但是没内容：

 因为后台返回的最后一级虽然没内容，但是是个空数组，所以会显示空白，通过递归判断是否是空数组，然后设置为undefined即可。

//获取问题类型数据
getProblemTypes(){
  this.axios({
    method:'post',
    url:window.API_HOST+'/problemType/getProblemType',
  }).then((res)=>{
    if(res.data.is_success){
      this.problemTypes = this.getTreeData(res.data.rets.problemTypeTree);
    }
  })
},
//递归判断列表，把最后的children设为undefined
getTreeData(data){
  for(var i=0;i<data.length;i++){
    if(data[i].problemList.length<1){
      // children若为空数组，则将children设为undefined
      data[i].problemList=undefined;
    }else {
      // children若不为空数组，则继续 递归调用 本方法
      this.getTreeData(data[i].problemList);
    }
  }
  return data;
},

最终代码：

<el-cascader
  v-model="formName.problemType"
  change-on-select
  :show-all-levels="false"
  :props="optionProps"
  :options="problemTypes"
  @change="changeProblemType">
</el-cascader>