这篇文章主要介绍了antd vue table跨行合并单元格,并且自定义内容实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ant-design-vue版本：~1.3.8
需求：表格实现跨行合并，并且在合并完的单元格中显示图片
效果图：
源码：
export default { data() { return { pic95: require('@/assets/produit/95.png-600'), pic99: require('@/assets/produit/99.png-600'), varTable: { cloumns: [ { title: '置信度', dataIndex: 'confidence ', class: 'confidence', customRender: (value, row, index) => { let obj = { children: '', attrs: {} } if (index === 0) { obj = { children: <div class="risk-pic"></div>, attrs: { rowSpan: 4 } } } if (index === 4) { obj = { children: <div class="risk-pic"></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-600’
import pic99 from ‘@/assets/produit/99.png-600’
如果有问题，欢迎提出，一起交流~~！
补充知识：ant-design vue table 可选列、自定义列实现
实现ant-design for vue 自定义列实现。点击按钮，弹窗显示所有列的checkbox，选择checkbox，确定即可实现自定义列。先上代码
.zyx-table{ position: relative; margin-top: 20px; .select-columns{ position: absolute; right: 0; top: -30<strong style="color:transparent">本文来源gao@daima#com搞(%代@#码网@</strong>px; } } .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跨行合并单元格,并且自定义内容实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持gaodaima搞代码网。
以上就是antd vue table跨行合并单元格,并且自定义内容实例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：antd vue table跨行合并单元格,并且自定义内容实例
转载请注明原文链接：antd vue table跨行合并单元格,并且自定义内容实例
