vxe-table实现水平树列表

在开发过程中，很多产品经理喜欢做一些花哨的表格展示。以下是常见的表格显示方式。看起来很复杂，但是实现起来非常简单。让我们看看代码是如何实现的。组件实现主要围绕vxe-talble-v3，这个基于vue的表格框架可以省力不少templatejsimportXEUtilsfrom"xe-utils";导出default{data(){return{tableData:[],acceptance_item:[],deepLevel:0,XEUtils:XEUtils};},created(){setTimeout(()=>{//获取api数据this.acceptance_item=this.getData();this.acceptance_item.forEach((item,idx)=>{item.sort=idx+1+''})letthat=this;//遍历api树形结构层数，标记最深层函数arrLevel(arr,lv){if(!arr||!arr.length)return;arr.forEach(item=>{that.deepLevel=lv>that.deepLevel?lv:that.deepLevel;if(item.children&&item.children.length){arrLevel(它em.children,lv+1)}})}//标记最深的赋值，vxetable正在渲染arrLevel(this.acceptance_item,1)console.log(this.deepLevel)this.toColTreeData(this.acceptance_item)},2000);},methods:{//将普通树结构转换为水平树列表toColTreeData(treeData){constoptions={children:"children"};常量列表=[];常量keyMap={};XEUtils.eachTree(treeData,(item,index,result,paths,parent)=>{item,index,result,paths,parent;keyMap[item.uid]=item;item.keys=parent?parent.keys.concat复制代码([item.uid]):[item.uid];if(!item.children||!item.children.length){constrow={};item.keys.forEach((key,index)=>{constlevel=index+1;constobj=keyMap[key];row[`id${level}`]=obj.uid;//第一层的分配编号和类型if(level==1){row.排序=obj.sortrow.type=obj.type}//内层的内容会覆盖外层letcontent=obj.content?obj.content:obj.provisionsrow.content=content;//name遍历整个结构体的所有名字row[`name${level}`]=obj.name});list.push(行);}}，选项）;this.keyMap=keyMap;console.log(list)this.tableData=list},formatterType({cellValue}){returncellValue==1?“主控项”：cellValue==2？"Generalitem":""},cellLink(e){debugger},//通用行合并函数（将相同的多列数据合并成行）rowspanMethod({row,_rowIndex,column,_columnIndex,visibleData}){let那=这个；让arr=[]for(leti=0;i1){return{rowspan:countRowspan,colspan:1};}}}//用点标记name+'n'letpoint=''Object.keys(row).forEach(item=>{if(item.indexOf('name')>-1&&item!=`name${that.deepLevel}`){point=item;}})//当point等于column.property时，操作当前cell移动拉伸if(point==column.property&&!row[`name${that.deepLevel}`]){return{rowspan:1,colspan:this.deepLevel-(parseInt(point.split('name')[1])-1)}}//将undefined的单元格隐藏if(cellValue==undefined){return{rowspan:0,colspan:0}}},getData(){constdata=[{id:10,uid:"317218091849220096",puid:"0",type:1,name:"1",content:"钢筋",provisions:[{provisions_id:"",provisions_info:"",specification_id:"",},],children:[{id:9,uid:"317218091849220097",puid:"317218091849220096",type:0,name:"1.1",content:"",provisions:[{provision_id:"1",provisions_info:"钢筋",specification_id:"1",},{provision_id:"2",provision_info:"混合土",specification_id:"1",},],children:[],},{id:9,uid:"317218091849220200",puid:"317218091849220096",type:0,name:"1.2",content:"",provisions:[{provisions_id:"3",provisions_info:"钢筋1",specification_id:"1",},{provisions_id:"4",provisions_info:"混凝土1",specification_id:"1",},],children:[],},{id:10,uid:"317218091849220201",puid:"317218091849220096",type:0,name:"1.3",content:"",provision:[{provisions_id:"5",provisions_info:"钢筋2",specification_id:"1",},{provision_id:"6",provisions_info:"混凝土2",specification_id:"1",},],children:[//{//id:11,//uid:"317218091849220202",//puid:"317218091849220201",//type:0,//name:"1.3.1",//content:"一般323",//provisions:[//{//provisions_id:"",//provisions_info:"",//specification_id:"",//},//],//children:[],//},],},],},{id:13,uid:“317218091849220098”，puid：“0”，类型：2，名称e:"2",content:"",provisions:[{provision_id:"",provision_info:"",specification_id:"",},],孩子们：[{id:12,uid:"317218091849220099",puid:“317218091849220098”，类型：0，名称：“2.1”，内容：“”，条款：[{provisions_id：“”，provisions_info：“”，specification_id：“”，}，]，孩子：[{id：11，uid:"317218091849220100",puid:"317218091849220099",type:0,name:"2.1.1",content:"一般",provisions:[{provisions_id:"",provisions_info:"",specification_id:"",},],children:[],},{id:11,uid:"317218091849220101",puid:"317218091849220099",type:0,name:"2.1.2",content:"一般",provisions:[{provisions_id:"",provision_info:"",specification_id:"",},],children:[],},],},],}]返回数据}},};scss.vxe-table{//隐藏空间表头&::v-deep.header{display:none;}&::v-deep.cellContent{.link{border-bottom:1pxsolid#7ca8fb;颜色：#7ca8fb；游标：指针；左边距：5px；＆：徘徊{border-bottom:1px纯蓝色;颜色：蓝色；}}}}