資料驅動表格(2)
前幾天分享了驅動表格的一種排版,今天分享另一種排版,效果如下圖:
相較於第一種複合排版,這種排版實現起來比較簡單,基本規則與之前的相同,只是僅顯示能後排下的欄位。
tips:本文只分享一種思路,程式碼中仍有一些需優化的地方,可自行優化。
實現如下:
<!-- template --> <table v-for="(group, i) in originData" :key="i" class="table"> <tr class="title"> <td :colspan="totalCol">{{group.title}}</td> </tr> <tr> <td v-for="(row, j) in group.tableList" :key="j" class="label" :collapse="row.col" :style="{width: `${colWidth * row.col}px`}">{{row.label}}</td> </tr> <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]}}</td> </tr> </table> /* 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() }