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

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

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

评论 6

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

    Great paintings! This is the type of information that are supposed to be shared around the internet. Disgrace on Google for now not positioning this submit higher! Come on over and consult with my website . Thank you =)

  2. #5

    It’s awesome to pay a quick visit this web sitye and reading the views of alll mmates regarding this article,
    while I am also eager of getting know-how.

  3. #4

    If somebody like Julia Roberts or Natalie Portman had a personal blog where they posted pictures of their vacations or something, would you still take them seriously as actors? Do you think celebrities with personal blogs are less credible and taken less seriously than those who don’t? Furthermore, would you visit their blogs to see what they are up to?.

  4. #3

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

    solar movies2周前 (06-07)回复
  5. #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.

  6. #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主题服务商

立即前往