关注前端开发
关注用户体验

数据驱动表格(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()
}

赞(7)
未经允许不得转载:大前端 » 数据驱动表格(2)
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    I have been surfing online more than three hours today
    for cheapcalgarypainting & 数据驱动表格(2)-大前端,
    yet I never found any interesting article like yours.
    It’s pretty worth enough for me. In my opinion, if
    all webmasters and bloggers made good content as you did, the internet will be a lot more useful
    than ever before.

themebetter 国内更好的WordPress主题服务商

立即前往