个性化阅读
专注于IT技术分析

vue+element跨行跨列合并

现在vue还是很流行,大家都在学习并且使用vue框架,element-ui是饿了么基于vue.js编写的前端ui框架,像其他ui框架一样,极大提高了前端工作效率,文档也很简单易懂,具体使用可以到官方文档查看,可是在使用table组件过程中,会遇到一个问题,table跨行跨列怎么实现?

首先在html文档中使用element-ui时需要引入相关的SDN:

<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

下面是原来的table组件样式:

原始table组件样式

1、 合并列使用arraySpanMethod函数

该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,实际上就是给td加上rowspan属性,第二个元素代表colspan,实际上就是给td加上colspan属性。也可以返回一个键名为rowspancolspan的对象,下面来看例子:

合并列效果图

1.1、在表格中加入:span-method=”arraySpanMethod”属性

<template>
    <el-table
            :span-method="arraySpanMethod"
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>
</template>

1.2、在methods中加入arraySpanMethod函数

new Vue({
    el: '#app',
    data: function() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    methods: {
        arraySpanMethod({row, column, rowIndex, columnIndex}) {
            if (rowIndex % 2 === 0) {//判断条件可以设置成你想合并的行的起始位置,本例子是除了标题第一行
                if (columnIndex === 1) {///判断条件可以设置成你想合并的列的起始位置,本例子是第二列开始
                    return [1,2];//合并第一单元格至第二单元格
                } else if (columnIndex === 1) {
                    return [0, 0];
                }
            }
        },
    }
    
})

2、合并行:objectSpanMethod

合并行objectSpanMethod

2.1、在表格中加入:span-method=”objectSpanMethod”属性

<template>
    <el-table
            :span-method="objectSpanMethod"
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>
</template>

2.2、在methods中加入objectSpanMethod函数如下代码

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 1) {//判断条件可以设置成你想合并的列的起始位置,本例子是第二列开始
        if (rowIndex % 2 === 0) {//判断条件可以设置成你想合并的行的起始位置,本例子是除了标题第一行
            return {
                rowspan: 2,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    }
}

以上是在element中使用table组件合并行,合并列的问题。很高兴你还能看到这里,有啥问题可以留言告诉我,一起交流学习,如果觉得有点用,麻烦点个赞吧,没功劳都有苦劳呀。

赞(0) 打赏
未经允许不得转载:srcmini » vue+element跨行跨列合并
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏