问题描述

问题解析

数据中存在 为空数据 children:[ ]

解决思路

将没子节点数据内容改为 undefind

<template>
  <div>
    <div>层级菜单显示</div>
    <!- clearable 可清除 级联 :options 级联数据 show-all-levels 展示所有等级 props 配置文件 -->

    <el-cascader :show-all-levels="false" v-model="data_tree" options="data_tree" :props="defaultprops"
                 clearable></el-cascader>

  </div>
</template>

<script>
  export default {

    data () {
      return {
        //级联数据集
        data_tree: [],
        //级联数据值
        data_tree_id: '',
        //级联配置文件
       defaultprops: {
          //选择任意层级
          checkStrictly: true,
          emitPath: false,
          label: 'name',
          value: 'id',
          options: Array,
          props: Object,
          size: String,
          placeholder: {
            type: String,
            default: () => t('el.cascader.placeholder')
          },
          disabled: Boolean,
          clearable: Boolean,
          filterable: Boolean,
          filterMethod: Function,
          separator: {
            type: String,
            default: ' / '
          },
          showAllLevels: {
            type: Boolean,
            default: true
          },
          collapseTags: Boolean,
          debounce: {
            type: Number,
            default: 300
          },
          beforeFilter: {
            type: Function,
            default: () => (() => {
            })
          },
          popperClass: String
        }
      }
    },
    create () {
      //获取级联数据
      getData()
    },
    methods: {
      async getData () {
       let result = await get('data_tree')
       //处理为空子节点数据 
        this.data_tree=this.getTreeData(result)
      },
      getTreeData(){
		   for (var i = 0; i < data.length; i++) {
		          if (data[i].children.length < 1) {
		            // children若为空数组，则将children设为undefined
		            data[i].children = undefined
		          } else {
		            // children若不为空数组，则继续 递归调用 本方法
		            this.getTreeData(data[i].children)
		          }
		        }
			        return data   
          }
    }
  }
</script>