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

LLL_LH

于 2019-07-17 15:40:28 发布

阅读量480

点赞数 1

CC 4.0 BY-SA版权

分类专栏： element-ui

本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/96314586

element-ui 专栏收录该内容

12 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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()方法解决空级联