前几天赋享了驱动表格的一种排版，今天赋享另一种排版，效果如下图：

相较于第一种复合排版，这种排版完成起来比拟简单，根本规则与之前的相同，只是仅显现能后排下的字段。

tips：本文只分享一种思绪，代码中仍有一些需优化的中央，可自行优化。

完成如下：

    <td v-for="(row, j) in group.tableList" :key="j" class="label" :collapse="row.col" :style="{width: `${colWidth * row.col}px`}">{{row.label}}

<tr v-for="(item, i) in data.list">
    <td v-for="(row, j) in group.tableList" :key="j" class="label" :collapse="row.col" :style="{width: `${colWidth * row.col}px`}">{{item[row.key]}}

/* js */
data() {
return {
totalCol: 14, //每行列数
labelCol: 2, //label所占列数
colWidth: 40, //每单位宽度
data: {
list: [{
field1: ‘数据field11’,
field2: ‘数据field12’,
field3: ‘数据field13’,
field4: ‘数据field14’,
field5: ‘数据field15’
}, {
field1: ‘数据field21’,
field2: ‘数据field22’,
field3: ‘数据field23’,
field4: ‘数据field24’,
field5: ‘数据field25’
}]
},
originData: [{
title: ‘分组2’,
multi: true,
fields: [{
key: ‘field1’,
label: ‘字段1’,
max: 3,
col: 2, //最小列数
row: 1
}, {
key: ‘field2’,
label: ‘字段2’,
col: 2,
row: 1
}, {
key: ‘field3’,
label: ‘字段3’,
col: 3,
row: 1
}, {
key: ‘field4’,
label: ‘字段4’,
col: 2,
max: 8,
row: 1
}, {
key: ‘field5’,
label: ‘字段5’,
col: 4,
row: 1
}, {
key: ‘field6’,
label: ‘字段6’,
col: 3,
row: 1
}, {
key: ‘field7’,
label: ‘字段7’,
col: 2,
row: 1
}]
}]
}
},
methods: {
init() {
let colField = {
total: 0,
list: []
}
this.originData.map(group => {
group.tableList = []
group.fields.map((field, i) => {
let newColTotal = colField.total + field.col
if(newColTotal <= this.totalCol) {
colField.list.push(field)
colField.total = newColTotal
} else {
this.fillRow(colField)
}
})
group.tableList = colField.list
})
},
//扩展行
fillRow(colField) {
let enableCol = this.totalCol - colField.total
if(colField.total < this.totalCol) {
colField.list.map((item, i) => {
item.max = item.max || 0
//可扩展或为本行最后一个字段
if(i === colField.list.length - 1) {
item.max = item.col + enableCol
}
if(item.max > 0) {
if(enableCol >= item.max - item.col) {
colField.total = colField.total - item.col + item.max
enableCol = enableCol - item.max + item.col
item.col = item.max
} else {
colField.total = colField.total + enableCol
item.col = item.col + enableCol
enableCol = 0
}
}
})
}
}
},
created() {
this.init()
}