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

明日之后华为手机怎么下载:數據驅動表格

明日之后禽蛋食谱 www.tpspi.icu 從前實現表格,尤其是跨行垮列的復雜表格大都是一行一行寫的,很是費時間,今天特來分享一個跨行跨列表格驅動思路(基于Vue)。

一、生成規則說明

1、每個字段配置有最小列數和最大列數,字段label寬度固定為2列(將表格等分為14列,1列為1單位)。

2、當前行列數不滿14時,優先擴展可擴展的字段(即有最大列數的字段),可擴展字段擴展之后仍不滿14時,擴展當前行最后一個字段。

二、關鍵點

1、生成行,并計算下一行跨行字段所占列數和

1、跨行處理,上一行(當前行之前的行)存在跨行字段時,當前行可用列數=總列數-跨行字段所占列數和

三、實現(千言萬語都在實現里)

<!-- template -->
<table v-for="(group, i) in originData" :key="i" class="table">
    <!-- 組標題 -->
    <tr class="title">
        <td :colspan="totalCol">{{group.title}}</td>
    </tr>

    <tr v-for="(row, j) in group.tableList" :key="j">
        <!-- 字段 -->
        <template v-for="(col, k) in row">
            <td class="label" :style="{width: `${labelCol*colWidth}px`}" :colspan="labelCol" :rowspan="col.row">{{col.label}}</td>
            <td class="value" :style="{width: `${col.col*colWidth}px`}" :colspan="col.col" :rowspan="col.row"></td>
        </template>
    </tr>
</table>

/* js */

data() {
    return {
        totalCol: 14, //總列數
        labelCol: 2, //label所占列數
        colWidth: 40, //每單位寬度
?       originData: [{
            title: '分組1',  //分組標題
            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: 4
            }, {
                key: 'field4',
                label: '字段4',
                col: 6,
                max: 8,
                row: 1
            }, {
                key: 'field5',
                label: '字段5',
                col: 2,
                row: 1
            }, {
                key: 'field6',
                label: '字段6',
                col: 3,
                row: 4
            }, {
                key: 'field7',
                label: '字段7',
                col: 2,
                row: 1
            }, {
                key: 'field8',
                label: '字段8',
                col: 2,
                row: 1
            }, {
                key: 'field9',
                label: '字段9',
                col: 3,
                row: 2
            }, {
                key: 'field10',
                label: '字段10',
                col: 2,
                max: 4,
                row: 1
            }, {
                key: 'field11',
                label: '字段11',
                col: 2,
                row: 1
            } , {
                key: 'field12',
                label: '字段12',
                col: 8,
                row: 1
            }, {
                key: 'field13',
                label: '字段13',
                col: 8,
                row: 1
            }, {
                key: 'field14',
                label: '字段14',
                col: 2,
                row: 1
            }]
        }]
    }
},
methods: {
    init() {
        let colField = {
            total: 0,
            ruleColTotal: 0,
            list: []
        }
        let rowRule = [] //跨行規則
        this.originData.map(group => {
            group.tableList = []
            group.fields.map((field, i) => {
                let newColTotal = colField.total + (field.col + this.labelCol)
                field.ruleIndex = null

                if(field.row > 1) { //生成跨行規則數組
                    field.ruleIndex = rowRule.length
                    rowRule.push({
                        col: field.col + this.labelCol,
                        enableRol: field.row - 1,
                        currentRow: true //當前行規則
                    })
                }

                if(newColTotal <= this.totalCol - colField.ruleColTotal) { //可放在當前行
                    colField.total = newColTotal
                    colField.list.push(field)
                } else {
                    this.fillRow(colField, rowRule)
                    this.handleRule(rowRule)

                    //將上一行push到tableList
                    group.tableList.push(colField.list)

                    //跨行字段所占列數和
                    let ruleColTotal = 0
                    rowRule.map((rule, j) => {
                        if(!rule.currentRow && rule.enableRol >= 0) {
                            ruleColTotal += rule.col
                        }
                    })

                    //新建行
                    colField = {
                        ruleColTotal: ruleColTotal,
                        total: field.col + this.labelCol,
                        list: [field]
                   }

                }

                //最后一個字段
                if(i === group.fields.length - 1) {
                    this.fillRow(colField, rowRule)
                    //將上一行push到tableList
                    group.tableList.push(colField.list)
                }
            })
        })
    },
    //處理規則
    handleRule(rowRule) {
        rowRule.map((rule, j) => {
            rule.enableRol -= 1
            rule.currentRow = false
        })
    },
    //擴展行
    fillRow(colField, rowRule) {
        //檢查行是否滿列,非滿列則按規則擴大可擴大字段,可擴展字段擴展完后還有多余列則擴大最后一列
        let enableCol = this.totalCol - colField.ruleColTotal - colField.total
        // if(enableCol > 0) {
        colField.list.map((item, i) => {
            // if(enableCol > 0) {
                    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
                        }
                    }

                    if(typeof(item.ruleIndex) === 'number') {
                        rowRule[item.ruleIndex].col = item.col + this.labelCol
                    }
                // }
            })
        // }
    }
},
created() {
    this.init()
}

 

 

 

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

評論 3

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

    Merci pour écrire ce awesome article. Je suis un lecteur de longue
    date, mais je n’ai jamais été contraint de laisser un commentaire.

    Je me suis abonné à votre blog et partagé ce sur mon Facebook.
    Merci encore pour une grande post!

  2. #2

    文章不錯,點贊

  3. #1

    ?i! Someone in my Facebook gгoup shared this site with u? ?o
    I cɑme to lo?k it over. I’m definjtely loving t?e ?nformation. I’m bookmarking
    ɑnd ?ill ?e tweeting thi? to my followers! Superb blog and
    terrific design.

    jadi ahli mary kay2個月前 (04-01)回復

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

立即前往