基于vue+element-ui实现Cascader级联选择器+Table树形数据

开发进度提前50%，啊，真香。

下面，看图说话

Table树形数据 Cascader级联选择器

功能实现+详细代码

Cascader级联选择器

options属性指定选项数组即可渲染出一个级联选择器，所以后端接口返回的数据结构要保持一一致性，这样处理起来会省很多事。

element官网给出的options需要的数据格式：

options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则'
          }]
}]

后端接口返回的数据格式：

我们需要把后端返回的数据做一下处理，来满足options的需要的标准格式：

	handleAdd() {
      this.$api.rechargeclass.list().then(res => {
        this.$set((this.optionclass = this.getTreeData(res)))
      })
    },
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        data[i].label = data[i].class   
        data[i].value = data[i].id
        if (data[i].children.length < 1) {
          data[i].children = undefined     //避免children为空的时候，下一级显示为空白
        } else {
          this.getTreeData(data[i].children)
        }
      }
      return data
    },

注意：data[i].children = undefined 这里的判断一定需要的，否则你会掉到大坑里

实现cascader组件：

<template v-slot:pid="{ form, formItemKey }">
          <el-cascader
            v-model="form[formItemKey]"
            :options="optionclass"
            @change="handleChange"
            clearable
            show-all-levels
            :props="{ checkStrictly: true }"
            style="width:350px"
          ></el-cascader>
        </template>

handleChange(value) {
      console.log(value）
    },

注意：这里为了业务需求，用slot插槽，可以选择性忽略

到这里级联选择器就写完了。

Table树形数据

当我按部就班准备写Table列表时，就发现了神奇的一幕，如开篇图所示，树形结构自动生成了，当时我就震惊了。。。

马上翻开文档： 好家伙，你品，你细细品，children的伟大之处就在于此了 说到这里，想想刚不久和后端小哥哥约定的传过来的child字段改成children，真是起了大作用。

没事多看看文档api真的很重要啊！