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: ,
  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 + '%'
    }
  }
}

导入图片的方式还有

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

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

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

补充知识：ant-design vue table 可选列、自定义列实现

实现ant-design for vue 自定义列实现。点击按钮，弹窗显示所有列的checkbox，选择checkbox，确定即可实现自定义列。先上代码

.zyx-table{
 position: relative;
 margin-top: 20px;

 .select-columns{
  position: absolute;
  right: 0;
  top: -30px;
 }
}

.ant-row{
 width: 100%;

 .ant-col-8{
  margin-bottom: 10px;
 }
}

.ant-checkbox-group{
 width: 100%;
}

该组件二次封装了a-table，集成原a-table所有方法

使用方法，在全局注册该组件，将原a-table替换为zyx-table即可实现。

将原标签替换为rander函数，是为了实现slot动态传入的效果。

有疑问或者更好的建议，欢迎光临思密达。github传送门

以上这篇antd vue table跨行合并单元格,并且自定义内容实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。