element-ui之级联选择器(Cascader)的使用详细教程

实现效果

1.后端返回的json数据格式

[
    {
        "id": "2",
        "name": "北京市市辖区",
        "shortName": "北京",
        "level": 2,
        "parentId": "1",
        "childrenRegionVo": [
            {
                "id": "105",
                "name": "石景山区",
                "shortName": "石景山",
                "level": 3,
                "parentId": "2",
                "childrenRegionVo": null
            },
            {
                "id": "115",
                "name": "海淀区",
                "shortName": "海淀",
                "level": 3,
                "parentId": "2",
                "childrenRegionVo": null
            },
            {
                "id": "14",
                "name": "西城区",
                "shortName": "西城",
                "level": 3,
                "parentId": "2",
                "childrenRegionVo": null
            }
        ]
    }
]

注意：上面的json数据，由后端提供，子项 中 children 为空数组，最后在前台显示的时候会出现空级联 的bug存在，所以后端给我返回的是null，避免这种情况出现了。

2.前端代码处理

html模块

<el-cascader
    ref="cascader"
    v-model="selectedOptions"
    :options="regionOption"
    :props="regionParams"
    @change="regionOptionChange"
    clearable></el-cascader>

data里的数据定义

regionOption:[], //地域信息
selectedOptions:[],//当前选中的地域信息
regionParams:{
        label:'name', //这里可以配置你们后端返回的属性
        value:'id',
        children:'childrenRegionVo',
        expandTrigger: 'hover',
        checkStrictly: true,
      },//地域信息配置参数

进页面就可以在mouted里面调用，方法是你们自己项目调用接口的封装，可以用自己的，直接获取就行

method:{
// 获取地域信息
    getGionalList() {
    //请求后端接口拿数据
      commandApi.findCommentatorRegionalList().then((res) => {
        if (res.resp_code === 0) {
          this.regionOption = res.datas.datas
          console.log(this.regionOption,'this.regionOption')
        }
      });
    },
    // 切换地域信息
    regionOptionChange(val){
      console.log(val,'val')
    },
},
 mounted() {
      // 调用方法获取所有数据
      this.getProductType();
}

3.优化：

由于级联选择器选中后需要点击其他地方才能收起，感觉不美观，想实现下拉框自动收起效果

通过ref，在每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可。

watch: {
    selectedOptions() {
      if (this.$refs.cascader) {
        this.$refs.cascader.dropDownVisible = false;
        console.log(this.$refs.cascader,'cascader')
      }
    }
  },