elementUI 级联选择器遇到的坑

1. elementUI中使用级联选择时常常会遇到后端返回的数据和前端展示的数据的属性名称不一致，如下是前端页面中使用elementUI

<el-cascader :options="options" :show-all-levels="false"></el-cascader>
options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }]
          }]    
        }]

但是我们从后台拿到的数据也许是

后台属性名称和前端的属性名称完全不一致，这时可以使用props配置数据源的属性 如：

 <el-cascader :options="options" :props="optionProps" :show-all-levels="false"
 ></el-cascader>
 
 optionProps: {
    children: "child",
    label: "name",
    value: "id"
  },

配置后，前端中的children会渲染后端传递的child,label的值会渲染后端传递的name属性的值，value会显示属性为id的值。。。

2. 级联选择器最后一项显示暂无数据

这是由于后端返回的数据最后一层数据children的值为空数组，需要值为空数组的children值设置为undefined即可解决

可以递归调用如下方法，处理后端返回数据：

 function setTreeData(data) {
     for (var i = 0; i < data.length; i++) {
         if (data[i].child.length < 1) {
             data[i].child = undefined;
         } else {
             setTreeData(data[i].child);
         }
     }

     return data;
 }

3. 属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级。 注意，即便设置:show-all-levels='false'，收到的id还是由完整路径id组成的数组