elementui的el-cascader级联选择器空级联

最新推荐文章于 2024-02-17 10:40:51 发布

原创最新推荐文章于 2024-02-17 10:40:51 发布 · 493 阅读

0 ·

CC 4.0 BY-SA版权

element-ui 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用级联选择器（Cascader）的方法，通过递归处理数据以确保当子级数据为空时能够正确展示。具体实现包括定义级联选择器属性、数据处理方法及如何获取地区树形结构。

<el-cascader  :options="areaTree"
                           change-on-select
                           :props="areaProps"
                           v-model="value"
                           @change="changeArea">
              </el-cascader>

<script>
...
data(){
 return{
  value: '',
  areaProps: {
        label: 'name',
        value: 'id'
      },
 }
},
methods:{
 getAreaTree () {
      area.tree().then(res => {
        this.areaTree = this.getChildsData (res.data);
      })
    },
getChildsData (data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children== null || data[i].children.length < 1) {
          data[i].children= undefined;
        } else {
          this.getChildsData(data[i].children);
        }
      }
      return data;
    }
}
</script>

getChildsData()方法解决空级联