开发过程中，很多产品经理都喜欢做些花里胡哨的表格展示，以下是一种常见的表格展示方式，看上去好像很复杂，实现起来很简单，下面看看代码怎么实现
文章图片
组件实现主要围绕vxe-talble-v3，这款基于vue的表格框架能节省很大的功夫
template
{{item.provisions_info}}
{{row.content}}
【vxe-table 实现横向树列表】js
import XEUtils from "xe-utils";
export 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+''
})
let that = this;
// 遍历api树形结构层数，标记最深层
function 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(item.children,lv+1)
}
})
}
// 标记最深层赋值，vxetable在渲染出去
arrLevel(this.acceptance_item,1)
console.log(this.deepLevel)
this.toColTreeData(this.acceptance_item)
}, 2000);
},
methods: {
// 将普通树结构转换为横向树列表
toColTreeData(treeData) {
const options = { children: "children" };
const list = [];
const 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) {
const row = {};
item.keys.forEach((key, index) => {
const level = index + 1;
const obj = keyMap[key];
row[`id${level}`] = obj.uid;
// 第1层赋值序号和类型
if(level==1){
row.sort = obj.sort
row.type = obj.type
}
// content里面层会覆盖外面层
let content = obj.content?obj.content:obj.provisions
row.content = content;
// name遍历整个结构的所有name
row[`name${level}`] = obj.name});
list.push(row);
}
},
options
);
this.keyMap = keyMap;
console.log(list)
this.tableData = https://www.it610.com/article/list
},
formatterType ({ cellValue }) {
return cellValue==1?"主控项目": cellValue =https://www.it610.com/article/= 2?"一般项目":""
},
cellLink(e){
debugger
},
// 通用行合并函数（将相同多列数据合并为一行）
rowspanMethod({ row, _rowIndex, column,_columnIndex, visibleData }) {
let that = this;
let arr = []
for(let i=0;
i 1) {
return { rowspan: countRowspan, colspan: 1 };
}
}
}
// 用point标记name+'n'
let point = ''
Object.keys(row).forEach(item=>{
if(item.indexOf('name')>-1 && item != `name${that.deepLevel}`){
point = item;
}
})
// point 与 column.property 相等时，操作当前单元格横移拉伸
if(point == column.property && !row[`name${that.deepLevel}`]){
return { rowspan: 1, colspan: this.deepLevel - ( parseInt(point.split('name')[1]) - 1 ) }
}
// 将undefined的单元格隐藏
if(cellValue=https://www.it610.com/article/=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: [
{
provisions_id: "1",
provisions_info: "钢筋",
specification_id: "1",
},
{
provisions_id: "2",
provisions_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: "",
provisions: [
{
provisions_id: "5",
provisions_info: "钢筋2",
specification_id: "1",
},
{
provisions_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",
type: 2,
name: "2",
content: "",
provisions: [
{
provisions_id: "",
provisions_info: "",
specification_id: "",
},
],
children: [
{
id: 12,
uid: "317218091849220099",
puid: "317218091849220098",
type: 0,
name: "2.1",
content: "",
provisions: [
{
provisions_id: "",
provisions_info: "",
specification_id: "",
},
],
children: [
{
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: "",
provisions_info: "",
specification_id: "",
},
],
children: [],
},
],
},
],
}]
return data
}
},
};
scss
.vxe-table{
// 隐藏空表头
&::v-deep .header {
display: none;
}
&::v-deep .cellContent {
.link{
border-bottom: 1px solid #7ca8fb;
color: #7ca8fb;
cursor: pointer;
margin-left: 5px;
&:hover{
border-bottom: 1px solid blue;
color: blue;
}
}
}
} 
