iview 老版本合并单元格

新版的iview中已经支持了合并单元格了，我的版本比较老，为："iview": "^3.5.2"。暂不支持。记录一下别的大佬的方法。感觉思路比较活，正在这种思路需要在解决问题的过程中学习。

核心思路：通过render方法，加上设置样式实现看似合并单元格。
代码如下：

data数据

dataList = [
        {
            index: '1',
            indexName: 'a',
            rate: '35%',
            standard: '描述11111',
            list: [
                { info: "规则1", score: "100" },
                { info: "规则2", score: "80" },
                { info: "规则3", score: "60" },
                { info: "规则4", score: "40" },
            ]
        },
        {
            index: '2',
            indexName: 'b）',
            rate: '30%',
            standard: '描述2222'',
             list: [
                { info: "规则1", score: "100" },
                { info: "规则2", score: "80" },
                { info: "规则3", score: "60" },
                { info: "规则4", score: "40" },
            ] 
        }, 
    ]

列的数据，在此数据中通过render来控制

    columns: any[] = [
        {
            title: '序号',
            key: 'index'
        },
        {
            title: '指标',
            key: 'indexName'
        },
        {
            title: '权重',
            key: 'rate'
        },
        {
            title: '评分标准',
            key: 'standard'
        },
        {
            title: '详情',
            key: 'list',
            width: 250,
            render: (h, params) => { 
                return h('div', {
                    attrs: {
                        class: 'subCol'
                    },
                }, [
                    h('ul', params.row.list.map(item => {
                        return h('li', {}, item.info)
                    }))
                ])
            }
        },
        {
            title: '分值',
            key: 'list',
            width: 100,
            render: (h, params) => {  
                return h('div', {
                    attrs: {
                        class: 'subCol'
                    },
                }, [
                    h('ul', params.row.list.map(item => {
                        return h('li', {}, item.score)
                    }))
                ])
            }
        }, 
    ] 

组件代码

<Table :columns="columns" :data="dataList"  :loading="loading" border></Table>

css

.subCol>ul>li {
    margin: 0 -18px;
    list-style: none;
    text-Align: center;
    padding: 9px;
    border-bottom: 1px solid #ccc;
    overflow-x: hidden;
}

.subCol>ul>li:last-child {
    border-bottom: none
}

实现效果

image.png

参考网站：
https://blog.csdn.net/weixin_34138139/article/details/88600460