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

源码:
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 (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 + '%'
    }
  }
}
,
                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://www.cqwzjz.cn/article/cchdsg.html

 建站
建站
 咨询
咨询 售后
售后
 建站咨询
建站咨询 
 