本篇文章给大家带来的内容是关于如何利用iview的table组件实现将表格的列合并，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
iview的Table组件表头分组
iview的Table组件表头分组
需求说明
合并表头
合并列，展示[合计]
最终呈现的效果
问题
表头有重复的key，数据如何匹配
实现合并列——需要修改Table组件来实现
1、合并表头
根据iview提供的demo可以看出，表头的编辑是比较容易的，只需要根据格式编写即可。
问题：表头有重复的key，表头和表数据如何匹配
解决：
需要分组的表头 key_供货人ID
需要分组的表数据 key_供货人ID
[ { "width":"200", "align":"center", "title":"物品名称", "ellipsis":true, "key":"name", }, { "width":"100", "align":"center", "title":"数量", "ellipsis":true, "key":"purchaseAmount", }, { "width":"166", "align":"center", "title":"lyy369", "ellipsis":true, "key":"supplier_11113173785", "children":[ { "width":"100", "align":"center", "title":"单价(元)", "ellipsis":true, "key":"quoteUnitPrice_11113173785", }, { "width":"100", "align":"center", "title":"总计(元)", "ellipsis":true, "key":"quoteTotalPrice_11113173785", } ] }, { "width":"166", "align":"center", "title":"私人定制", "ellipsis":true, "key":"supplier_11113173838", "children":[ { "width":"100", "align":"center", "title":"单价(元)", "ellipsis":true, "key":"quoteUnitPrice_11113173838", }, { "width":"100", "align":"center", "title":"总计(元)", "ellipsis":true, "key":"quoteTotalPrice_11113173838", } ] }]
登录后复制
[ { "name":"手动添加", "purchaseAmount":"9887.00", "quoteTotalPrice_11113173785":"494350.00", "supplierId_11113173785":"11113173785", "quoteAmount_11113173785":"9887.0000", "quoteUnitPrice_11113173785":"50.0000", "quoteTotalPrice_11113173838":"988700.00", "supplierId_11113173838":"11113173838", "quoteAmount_11113173838":"9887.0000", "quoteUnitPrice_11113173838":"100.0000" }, { "name":"2018年7月9日", "purchaseAmount":"1.00", "quoteTotalPrice_11113173785":"50.00", "supplierId_11113173785":"11113173785", "quoteAmount_11113173785":"1.0000", "quoteUnitPrice_11113173785":"50.0000", "quoteTotalPrice_11113173838":"100.00", "supplierId_11113173838":"11113173838", "quoteAmount_11113173838":"1.0000", "quoteUnitPrice_11113173838":"100.0000" }, { "name":" 中国移动取消流量“漫游”费", "purchaseAmount":"563.00", "quoteTotalPrice_11113173785":"28150.00", "supplierId_11113173785":"11113173785", "quoteAmount_11113173785":"563.0000", "quoteUnitPrice_11113173785":"50.0000" }, { "name":" 中国移动取消流量“漫游”费", "purchaseAmount":"23.00", "quoteTotalPrice_11113173785":"1150.00", "supplierId_11113173785":"11113173785", "quoteAmount_11113173785":"23.0000", "quoteUnitPrice_11113173785":"50.0000", "quoteTotalPrice_11113173838":"2300.00", "supplierId_11113173838":"11113173838", "quoteAmount_11113173838":"23.0000", "quoteUnitPrice_11113173838":"100.0000" }]
登录后复制
2、实现[合计]的合并列展示
此处需要更改iview的Table组件的源码。
数据格式如下，控制行，控制列，控制合并个数，控制展示数据
[ {// 每一条，表示有一行 "total":"合计", // 展示的数据 "key":"total", // 表头的key "align":"center", "ellipsis":true, "colspan":"2", // 需要计算合并列的个数 "tableBody":[ // tableBody.length 表示有多少个值 { "total_11113173785":"523700.00", "key":"total_11113173785", "colspan":"2", "align":"center", "ellipsis":true }, { "total_11113173838":"991100.00", "key":"total_11113173838", "colspan":"2", "align":"center", "ellipsis":true } ] }]
登录后复制
以下是修改的源码，暂时不支持表格的鼠标移入等事件
table-body.vue:33
登录后复制
登录后复制
相关推荐：
element-ui怎样实现复用Table的组件
IView中on-change属性如何使用
iview的select下拉框选项错位解决办法
JS表格组件神器bootstrap table详解（基础版）
以上就是如何利用iview的Table组件实现将表格的列合并的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2743485.html
