關注前端開發
關注用戶體驗

數據驅動表格(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()
}

贊(19)
未經允許不得轉載:大前端 » 數據驅動表格(2)
分享到: 更多 (0)

themebetter 國內更好的WordPress主題服務商

立即前往
广东26选5复式计算