vue jsx 封装Table 表格+Tree 树形控件

背景介绍

通过表格展示树的层级，可通过对树的勾选对每一个界面的dom元素进行控制，控制程度可精确到组件/标签

图片预览

需求分析

1.根据树形结构获取层级（列数）
2.根据数据动态控制表格列数
3.格式化表格内容
4.将单元格内容（扁平化）转为结构化数据
5.勾选/取消勾选时关联相关层级

树形结构设置层级

层级部分数据如下图所示

设置第一层

data(){return {index: '', //自定义列内容出现index未定义报错，需加上index参数numberList:[],num:0}
}

deepTableDataFirstLevel(data){ //setting first level 第一层var that = this;that.num ++;if(that.numberList.indexOf(that.num) == -1){that.numberList.push(that.num);}data.filter(v=>{that.$set(v,'level',that.num);that.$set(v,'parentId',0);if(v.children && v.children.length > 0){that.deepTableDataOrderLevel(v.children,(that.num+1),v.id)}})
} 

num为层级

第一层默认parentId为0

numberList存储层级（储存标识防止重复层级）

设置其他层

deepTableDataOrderLevel(data,num,id){ //setting order level 其他层级var that = this;if(that.numberList.indexOf(num) == -1){that.numberList.push(num);}data.filter(v=>{that.$set(v,'level',num);that.$set(v,'parentId',id);if(v.children && v.children.length > 0){that.deepTableDataOrderLevel(v.children,(num+1),v.id)}})
} 

data为父级列表

父级列表遍历设置相同层级

每到下一层层级+1

deepTableDataOrderLevel方法每执行一次就把当前对象(存在children情况下)递归该对象chilren参数列表并给其对象设置层级

将相同层级数据转换为table列表数据

转换第一层

data(){return {num:0,index: '', //自定义列内容出现index未定义报错，需加上index参数columnData:[],levelObj:{}}
}

handleTable(data){ //setting first level 第一层var that = this;that.columnData = [];that.levelObj = {};data.filter((v,index)=>{that.$set