前言

当前问题使用的ivew 版本：3.4.2
后续版本可能会实现相关功能，请留意官方文档。

---

背景

最近做的项目使用的是iView框架，有个需求是要对iView的table进行单元格合并，但是iView官方并没有提供单元格合并的API，查阅相关资料后发现网上现有的实现方法都特别复杂，有的方法甚至需要对iView的源码进行修改，这些方法对于我当前的项目都是不可行的，经过思考，我通过修改iView table单元格css样式的方法实现了单元格合并。

思路

• 合并单元行：

去掉需要合并的单元格的右边框即可，这样在视觉效果上就能实现单元格合并。

• 合并单元列：

去掉需要合并的单元格的下边框即可。

示例代码

要修改iView table单元格的样式，需要用到官方提供的 cellClassName，具体使用方法可见官方文档：iView table 特定样式。通过为某些单元格设置cellClassName样式来实现去掉右边框或下边框。

• 合并单元行

<template>
    <Table border :columns="columns1" :data="data8"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns1: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data8: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park'
                    },
                    {
                        name: 'Jim Green',
                        age: '',
                        address: '',
                        // 为单元格设置样式
                        cellClassName: {
                            age: 'merge1',
                        }
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park'
                    },
                   
                ]
            }
        },
    }
</script>

<style>
     /* .ivu-table为ivew特定格式，cellClassName使用到的类名前面必须带着它*/
    .ivu-table .merge1 {
    border-right: 0;
    }
</style>

效果：

• 合并单元列
  将上述代码style中的代码修改成：

 .ivu-table .merge1 {
    border-bottom: 0;
    }

效果：