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,确定即可实现自定义列。先上代码
该组件二次封装了a-table,集成原a-table所有方法使用方法,在全局注册该组件,将原a-table替换为zyx-table即可实现。将原标签替换为rander函数,是为了实现slot动态传入的效果。有疑问或者更好的建议,欢迎光临思密达。github传送门以上这篇antd vue table跨行合并单元格,并且自定义内容实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。