antdvuetable实现跨行合并单元格并自定义内容实例-创新互联

antd vue table实现跨行合并单元格并自定义内容实例？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

滨海ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

源码：

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: 
,
                attrs: { rowSpan: 4 }
               }
              }
              if (index === 4) {
                obj = {
                children: 
,
                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 + '%'
    }
  }
}

文章名称：antdvuetable实现跨行合并单元格并自定义内容实例-创新互联
转载注明：http://cxhlcq.com/article/cchdsg.html