前言

當前問題使用的ivew 版本：3.4.2
后續(xù)版本可能會實現(xiàn)相關(guān)功能，請留意官方文檔。

背景

最近做的項目使用的是iView框架，有個需求是要對iView的table進行單元格合并，但是iView官方并沒有提供單元格合并的API，查閱相關(guān)資料后發(fā)現(xiàn)網(wǎng)上現(xiàn)有的實現(xiàn)方法都特別復雜，有的方法甚至需要對iView的源碼進行修改，這些方法對于我當前的項目都是不可行的，經(jīng)過思考，我通過修改iView table單元格css樣式的方法實現(xiàn)了單元格合并。

思路

• 合并單元行：

去掉需要合并的單元格的右邊框即可，這樣在視覺效果上就能實現(xiàn)單元格合并。

• 合并單元列：

去掉需要合并的單元格的下邊框即可。

示例代碼

要修改iView table單元格的樣式，需要用到官方提供的 cellClassName，具體使用方法可見官方文檔：iView table 特定樣式。通過為某些單元格設(shè)置cellClassName樣式來實現(xiàn)去掉右邊框或下邊框。

• 合并單元行

<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: '',
                        // 為單元格設(shè)置樣式
                        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;
    }