1.遇到的问题,级联选择器,发现每个层级的最后一层总是显示为无数据。预期效果为,当无数据时,应该不能点击展开。

2. 解决思路,通过与element官网提供的数据对比后发现,当子级为空时,后台应该不返回children这一层级了,前端暂时处理下数据。

 // 格式化数据源
    this.options = this.formatData(data)
    
    // 格式化数据,递归将空的children置为undefined
    formatData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          data[i].children = undefined
        } else {
          this.formatData(data[i].children)
        }
      }
      return data
    }

3. 完整代码

<template>
  <div class="white-body-view">
    <el-cascader v-model="value" :options="options" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [],
      value: ''
    }
  },
  created() {
    this.initData()
  },

  methods: {
    initData() {
      const data = [
        {
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: []
          }, {
            value: 'daohang',
            label: '导航',
            children: []
          }]
        },
        {
          value: 'ziyuan',
          label: '资源',
          children: []
        }]
      this.options = this.formatData(data)
    },

    formatData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          data[i].children = undefined
        } else {
          this.formatData(data[i].children)
        }
      }
      return data
    }
  }
}
</script>

 

Logo

前往低代码交流专区

更多推荐