antd vue table跨行合并单元格，并且自定义内容

ant-design-vue版本：~1.3.8

需求：表格实现跨行合并，并且在合并完的单元格中显示图片

效果图：

源码：

export default {
    data() {
        return {
            pic95: require('@/assets/produit/95.png'),
            pic99: require('@/assets/produit/99.png'),
            varTable: {
                cloumns: [
                    {
                        title: '置信度',
                        dataIndex: 'confidence ',
                        class: 'confidence',
                        customRender: (value, row, index) => {
                            let obj = {
                              children: '',
                              attrs: {}
                            }
                            if (index === 0) {
                              obj = {
                                children: <div class="risk-pic"><img src={this.pic95} /></div>,
                                attrs: { rowSpan: 4 }
                              }
                            }
                            if (index === 4) {
                                obj = {
                                children: <div class="risk-pic"><img src={this.pic99} /></div>,
                                attrs: { rowSpan: 4 }
                                }
                            }
                            if ([1, 2, 3, 5, 6, 7].indexOf(index) !== -1) {
                              obj.attrs.colSpan = 0
                            }
                            return obj
                        }
                    },
                    {
                      title: '天数',
                      dataIndex: 'window_length',
                      width: '25%',
                      customRender: (text) => text + '日'
                    },
                    {
                      title: 'VaR(万元)',
                      dataIndex: 'var',
                      width: '25%'
                    },
                    {
                      title: 'VaR/净资产',
                      dataIndex: 'var_rate',
                      width: '25%',
                      customRender: (text) => fmtRatio(text, 2)
                    }
                ],
                data: [
                    {window_length: 1, var: 151.69, var_rate: 0.01858},
                    {window_length: 5, var: 298.94, var_rate: 0.03661},
                    {window_length: 10, var: 416.70, var_rate: 0.05104},
                    {window_length: 20, var: 576.04, var_rate: 0.07055},
                    {window_length: 1, var: 370.64, var_rate: 0.045398},
                    {window_length: 5, var: 463.33, var_rate: 0.056751},
                    {window_length: 10, var: 632.91, var_rate: 0.077523},
                    {window_length: 20, var: 1233.95, var_rate: 0.15114}
                ]
            }
        }
    },
    methods:{
        // 百分数设置
        fmtRatio(val, index, def) {
            // index默认值为2
            var index = arguments[1] ? arguments[1] : 2
            if (val == null || isNaN(val) || typeof (val) === 'string' && val === '') {
                return def || '--'
            }
            var ratio = (val * 100).toFixed(index)
            return ratio + '%'
        }
    }
}

导入图片的方式还有

import pic95 from '@/assets/produit/95.png'
import pic99 from '@/assets/produit/99.png'

如果有问题，欢迎提出，一起交流~~！