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

明日之后4月更新:數據驅動表格(2)

明日之后禽蛋食谱 www.tpspi.icu 前幾天分享了驅動表格的一種排版,今天分享另一種排版,效果如下圖:

相較于第一種復合排版,這種排版實現起來比較簡單,基本規則與之前的相同,只是僅顯示能后排下的字段。

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()
}

贊(16)
未經允許不得轉載:明日之后禽蛋食谱 » 數據驅動表格(2)
分享到: 更多 (0)

評論 3

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
  1. #3

    no matter we can search out more and ideally we cant get better than this no doubt

  2. #2

    Nice post. I study one thing tougher on completely different blogs everyday. It should always be stimulating to learn content from different writers and observe a little one thing from their store. I’d choose to make use of some with the content on my blog whether or not you don’t mind. Natually I’ll give you a link in your internet blog. Thanks for sharing.

  3. #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.

    cheapcalgarypainting2個月前 (04-08)回復

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

立即前往