Vue使用Element的级联选择器Cascader出现空白面板

最近使用Vue写项目，有用到Element的级联选择器
由于后台给的数据，不是太符合级联选择器数据的规范，比如children为空时，级联选择器会出现空白的面板，又比如给的是text而不是label，如果直接使用，不会显示文字，我也是找了很久，自己试了很久，才找到一种解决办法的。

在Element-UI是的级联选择器中，只有children这个子节点，即使children: []，也会出现一个面板，就是图中的这个，为了去除这种空白的面板，需要对数据进行处理。

下面这是我的原数据，直接使用就是上面那种情况，这是我随手写的数据，id可能重复，你们如果用这个数据点击，可能会有点问题。

基本函数体如下，具体实践有要注意的地方，请继续往下阅读

注意：我用的是本地数据演示，list是假数据，一般我们是要对接后台，对接时候，不要把后台拿到的数据，直接带进去处理，容易报错。
操作原理 ，首先定义一个变量（A），令这个变量等于后台给的值（B），此时级联选择器绑定的数据为（C），我们令A=B，split函数里面传A，在split函数的forEach外，将处理后的数据给C；

下面是该页面的全部代码，应该是比较清晰明了的，希望对大家有帮助

<template>
  <div>
    <el-cascader :options="optionData" clearable :props="{ expandTrigger: 'hover'}" :show-all-levels="false">el-cascader>
  div>
template>

<script>
export default {
  name: "New",
  data() {
    return {
      optionData:[],
      list: [
        {
          id: 2,
          label: "南方地区",
          children: [
            {
              id: 13,
              label: "湖北省",
              children: [
                {
                  id: 14,
                  label: "武汉",
                  children: [
                    { id: 14, label: "洪山区", children: [] },
                    { id: 14, label: "硚口区", children: [] },
                  ],
                },
                {
                  id: 14,
                  label: "襄阳",
                  children: [],
                },
                {
                  id: 14,
                  label: "安陆",
                  children: [],
                },
              ],
            },
            {
              id: 14,
              label: "湖南省",
              children: [],
            },
            {
              id: 15,
              label: "浙江省",
              children: [],
            },
            {
              id: 16,
              label: "广东省",
              children: [],
            },
          ],
        },
        {
          id: 2,
          label: "北方地区",
          children: [
            {
              id: 13,
              label: "内蒙古",
              children: [
                {
                  id: 14,
                  label: "呼和浩特",
                  children: [],
                },
                {
                  id: 14,
                  label: "满洲里",
                  children: [],
                },
              ],
            },
            {
              id: 17,
              label: "北京",
              children: [
                {
                  id: 17,
                  label: "朝阳区",
                  children: [],
                },
              ],
            },
            {
              id: 17,
              label: "山东省",
              children: [],
            },
          ],
        },
        {
          id: 2,
          label: "西边地区",
          children: [
            {
              id: 13,
              label: "西藏",
              children: [],
            },
            {
              id: 17,
              label: "青海",
              children: [
                {
                  id: 17,
                  label: "西宁",
                  children: [],
                },
              ],
            },
            {
              id: 17,
              label: "新疆",
              children: [],
            },
          ],
        },
      ],
    };
  },
  methods: {
    //处理数据函数
    split(data) {
      data.forEach((ele) => {
        ele.value = ele.id; //创建一个value字段
        if (ele.children.length === 0) {
          //如果children为空，则删除children
          delete ele.children;
        } else {
          //children不为空表示里面仍然有子节点，继续遍历
          this.split(ele.children);
        }
      });
      this.optionData=data;
    },
    toSplit() {
      let res = this.list;
      this.split(res);
    },
  },
  beforeMount() {
    this.toSplit();
  },
};
script>

<style>
style>