element中el-cascader使用小结

表单结构

<el-cascader
	  ref="myCascader"
	  v-model="value"
	  :options="options"
	  placeholder="请选择地区范围"
	  style="width: 100%"
	  :props="{
	    expandTrigger: 'hover',
	    multiple: true,
	    value: 'id'
	  }"
	  filterable
	  clearable
	  collapse-tags
	  @change="handleRegin"
></el-cascader>

options绑定的数据结构

  options: [
    {
      id: "zujian",
      label: "组件",
      children: [
        {
          id: "basic",
          label: "Basic",
          children: [
            {
              id: "layout",
              label: "Layout 布局"，
              children: []
            },
            {
              id: "color",
              label: "Color 色彩"，
              children: []
            },
            {
              id: "typography",
              label: "Typography 字体"，
              children: []
            },
            {
              id: "icon",
              label: "Icon 图标"，
              children: []
            },
            {
              id: "button",
              label: "Button 按钮"，
              children: []
            }
          ]
        },
        {
          id: "form",
          label: "Form",
          children: [
            {
              id: "radio",
              label: "Radio 单选框"，
              children: []
            },
            {
              id: "checkbox",
              label: "Checkbox 多选框"，
              children: []
            },
            {
              id: "input",
              label: "Input 输入框"，
              children: []
            },
            {
              id: "input-number",
              label: "InputNumber 计数器"，
              children: []
            },
            {
              id: "select",
              label: "Select 选择器"
            },
            {
              id: "cascader",
              label: "Cascader 级联选择器"
            }
          ]
        },
        {
          id: "data",
          label: "Data",
          children: [
            {
              id: "table",
              label: "Table 表格"
            },
            {
              id: "tag",
              label: "Tag 标签"
            },
            {
              id: "progress",
              label: "Progress 进度条"
            },
            {
              id: "tree",
              label: "Tree 树形控件"
            },
            {
              id: "pagination",
              label: "Pagination 分页"
            },
            {
              id: "badge",
              label: "Badge 标记"
            }
          ]
        },
      ]
    },
    {
      id: "ziyuan",
      label: "资源",
      children: [
        {
          id: "axure",
          label: "Axure Components"
        },
        {
          id: "sketch",
          label: "Sketch Templates"
        },
        {
          id: "jiaohu",
          label: "组件交互文档"
        }
      ]
    }
  ]

重点地方 必坑点
options结构中子级的children为空时，会发现@change="handleRegin"方法无法触发，选择不上数据值
解决方案
将后台返回的数据进行判断，空数组的children进行删除操作；重新返回组件数据结构

let a = function(child) {
  return child.map(i => {
     if (i.children.length) {
       i.children = a(i.children);
     } else {
       delete i.children;
     }
     return i;
   });
};
this.cascader_options = a(res.data);