VUE开发--Element-UI--树形表格(六十)

一、安装组件

npm i element-ui -S

二、创建组件

1. 创建目录treeTable
2. 创建数组转换文件

'use strict'
import Vue from 'vue'
export default function treeToArray (data, expandAll, parent = null, level = null) {
  let tmp = []
  Array.from(data).forEach(function (record) {
    if (record._expanded === undefined) {
      Vue.set(record, '_expanded', expandAll)
    }
    let _level = 1
    if (level !== undefined && level !== null) {
      _level = level + 1
    }
    Vue.set(record, '_level', _level)
    // 如果有父元素
    if (parent) {
      Vue.set(record, 'parent', parent)
    }
    tmp.push(record)
    if (record.children && record.children.length > 0) {
      const children = treeToArray(record.children, expandAll, record, _level)
      tmp = tmp.concat(children)
    }
  })
  return tmp
}

3. 创建组件
   在目录中创建组件：index.vue

4. 使用组件TableTree.vue

5. 测试效果

   
   
   最终效果

三、使用说明

1. columns
   列属性,要求是一个数组
   text: 显示在表头的文字
   value: 对应data的key。treeTable将显示相应的value
   width: 每列的宽度，为一个数字(可选)
2. expandAll
   是否默认全部展开，boolean值，默认为false
3. evalFunc
   解析函数，function，非必须
   如果不提供，将使用默认的evalFunc
4. evalArgs
   解析函数的参数，是一个数组
   请注意，自定义的解析函数参数第一个为this.data，第二个参数为， this.expandAll,你不需要在evalArgs填写。一定记住，这两个参数是强制性的，并且位置不可颠倒 this.data为需要解析的数据，this.expandAll为是否默认展开。
   如你的解析函数需要的参数为(this.data, this.expandAll,1,2,3,4)，那么你只需要将[1,2,3,4]赋值给evalArgs就可以了
   如果你的解析函数参数只有(this.data, this.expandAll),那么就可以不用填写evalArgs了。
5. slot
   这是一个自定义列的插槽。
   默认情况下，treeTable只有一行行展示数据的功能。但是一般情况下，我们会要给行加上一个操作按钮或者根据当行数据展示不同的样式，这时我们就需要自定义列了。
   slot和columns属性可同时存在,columns里面的数据列会在slot自定义列的左边展示

三、树形数据（2.11.1）

https://element.eleme.io/#/zh-CN/component/table

结果展现

说明：
支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
新版功能更简单，更好使用。
注意：
实际测试，hasChildren 属性不添加也可，注意id不要重复，default-expand-all 属性无需设置值，添加该属性全部展开，不添加折叠。