基于element表格的合并多个行实例
官方示例地址：https://github.liubing.me/lb-element-table/zh/guide/
效果图：
0.下载lb-table 并引入
import LbTable from '@/components/lb-table/lb-table'
1.调用lb-table组件（merge="['pidName', 'tplName','mainDeptName']" === 展示要合并的字段）
<lb-table :column="tableData2.column"
:data="tableData2.data"
:merge="['pidName', 'tplName','mainDeptName']"
border>
</lb-table>
2.定义table展示数据：tableData2
column === 这是表头
// 通过render自定义出任意效果的编辑模式
data === 这是后台获取到的数据
tableData2: {
column: [
{
prop: 'pidName',
label: '指标类别'
},
{
prop: 'tplName',
label: '指标名称'
},
{
prop: 'tplType',
label: '属性',
render: (h, scope) => {
return (
<div>
{
scope.row.kpiType === 0?<span><span class="span-dian"></span>定量共性</span>:''
}
{
scope.row.kpiType === 1?<span><span class="span-dian"></span>目标差异</span>:''
}
{
scope.row.kpiType === 2?<span><span class="span-dian"></span>加分指标</span>:''
}
{
scope.row.kpiType === 3?<span><span class="span-dian"></span>扣分指标</span>:''
}
{
scope.row.kpiType === 4?<span><span class="span-dian"></span>定性指标</span>:''
}
</div>
)
}
},
{
prop: 'weight',
label: '权重'
},
{
prop: 'mainDeptName',
label: '责任部门'
},
{
prop: 'tplRemark',
label: '指标解释'
},
{
label: '操作',
render: (h, scope) => {
return (
<div>
{
<div>
<el-button size="mini" type="text" onClick={ () => { this.showView(scope.$index, scope.row) } } >指标解释
</el-button>
<el-button size="mini" type="text" onClick={ () => { this.showOtherCityFun(scope.$index, scope.row) } } >意见
</el-button>
</div>
}
</div>
)
}
}
],
data: []
},
3.定义table展示数据：tableData2.data 实例
{
"data": [
{
"id": "1201004802172719106",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-1-1.地区生产总值增长目标实现程度",
"tplRemark": "",
"pidName": "1-1.新旧动能转换",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市发改委",
"assistDeptName": null,
"weight": 40,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 0
},
{
"id": "1201004974642499585",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-1-2.税收占一般公共预算收入比重及提高幅度",
"tplRemark": "",
"pidName": "1-1.新旧动能转换",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市发改委",
"assistDeptName": null,
"weight": 30,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 0
},
{
"id": "1201005178561171457",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-2-1.\"双招双引\"考核情况",
"tplRemark": "",
"pidName": "1-2.\"双招双引\"",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市商务局",
"assistDeptName": null,
"weight": 200,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 0
},
{
"id": "1201005924811739137",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-3-1.政府债务管理",
"tplRemark": "",
"pidName": "1-3.打好防范化解重大风险攻坚战",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市财政局",
"assistDeptName": null,
"weight": 30,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 1
},
{
"id": "1201006164096782338",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-3-2.不良贷款率下降",
"tplRemark": "",
"pidName": "1-3.打好防范化解重大风险攻坚战",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市地方金融监管局",
"assistDeptName": null,
"weight": 20,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 0
},
{
"id": "1201006479755907073",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-3-3.安全生产",
"tplRemark": "",
"pidName": "1-3.打好防范化解重大风险攻坚战",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市应急管理局",
"assistDeptName": null,
"weight": 30,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 0
},
{
"id": "1201007299457126402",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-4-1.海陆粮仓建设(粮食加工产业营业收入)",
"tplRemark": "",
"pidName": "1-4.差异化指标",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市粮食和物资储备局",
"assistDeptName": null,
"weight": 40,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 5
},
{
"id": "1201008354936950785",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-4-2.海洋生产总值增长率",
"tplRemark": "",
"pidName": "1-4.差异化指标",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市海洋发展和渔业局",
"assistDeptName": null,
"weight": 40,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 5
},
{
"id": "1201008617475215361",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-4-3.高端铝产业营业收入占规模以上工业营业收入比重提高幅度",
"tplRemark": "",
"pidName": "1-4.差异化指标",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市工信局",
"assistDeptName": null,
"weight": 40,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 5
},
{
"id": "1201014435465650178",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-4-4.新一代信息技术产业营业收入增长率",
"tplRemark": "",
"pidName": "1-4.差异化指标",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市大数据局",
"assistDeptName": null,
"weight": 40,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 5
},
{
"id": "1201022197629181954",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-5-1.履行全面从严治党责任情况",
"tplRemark": "",
"pidName": "1-5.提高新时代党的建设质量",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市委办公室",
"assistDeptName": null,
"weight": null,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 4
},
{
"id": "1201022433101602817",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-5-2.开展\"不忘初心、牢记使命\"主题教育情况",
"tplRemark": "",
"pidName": "1-5.提高新时代党的建设质量",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市委组织部",
"assistDeptName": null,
"weight": null,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 4
},
{
"id": "1201022616396881921",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-5-3.履行抓基层党建工作职责情况",
"tplRemark": "",
"pidName": "1-5.提高新时代党的建设质量",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市委组织部",
"assistDeptName": null,
"weight": null,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 4
},
{
"id": "1201023035462377473",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "1-5-4.建设高素质专业化干部队伍情况",
"tplRemark": "",
"pidName": "1-5.提高新时代党的建设质量",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市委组织部",
"assistDeptName": null,
"weight": null,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 4
},
{
"id": "1201023275833745410",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "2-1.加块经济高质量发展若干政策落实",
"tplRemark": "",
"pidName": "2.市级指标",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市委办公室",
"assistDeptName": null,
"weight": 50,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 0
},
{
"id": "1201024089407086594",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "3-1.改革创新创先争优加分指标",
"tplRemark": "",
"pidName": "3.改革创新创先争优加分项",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市委组织部",
"assistDeptName": null,
"weight": 200,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 2
},
{
"id": "1201026237758951425",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "4-1.数据造假",
"tplRemark": "",
"pidName": "4.负面清单扣分项",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市大数据局",
"assistDeptName": null,
"weight": 50,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 3
},
{
"id": "1201026413366071297",
"pid": "0",
"children": [],
"creator": null,
"createDate": null,
"tplName": "4-2.重大失信事件",
"tplRemark": "",
"pidName": "4.负面清单扣分项",
"pids": "",
"level": 1,
"type": 0,
"sort": 0,
"mainDept": null,
"assistDept": null,
"checkDept": null,
"checkDeptName": null,
"mainDeptName": "市发改委",
"assistDeptName": null,
"weight": 50,
"kpiCode": null,
"otherCity": 0,
"deleted": 0,
"tplKpiWriteId": "0",
"tplExamId": "0",
"tplKpiWriteName": null,
"tplExamName": null,
"kpiType": 3
}
]
}
基于element表格的合并多个行实例的更多相关文章
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- Bootstrap-table实现动态合并相同行(表格同名合并)
写在前面: 有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并.要是不是相同的就不合并.如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成 ...
- jquery插入复杂表格，合并行列
此方法为个人测试所写,针对各种兼容性问题还未测试,初写的目的是easyui复杂表头有些缺陷,比如某个表头合并两列, 在easyui中这样操作无法绑定两个值 或者说我没找到 再或者 可以做个隐藏 数据列 ...
- 9月6日表格标签（table、行、列、表头）（补）
一.<table> <table>代表表格标签. <table></table> 1.width 表示表格宽度,宽度表达方式有像素和百分比两种.网 ...
- ASP.NET中重复表格列合并的实现方法(转自脚本之家)
这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...
- Element表格嵌入复选框以及单选框
1,element 表格嵌入CheckBox 效果图如下: 2,element结合checkBox实现单选效果如下: html代码: <template> <div> < ...
- layui：数据表格如何合并单元格
layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...
- 表格标签（table、行、列、表头）
表格标签 一.<table> <table>代表表格标签. <table></table> 1.width 表示表格宽度,宽度表达方式有像素和百分 ...
- 基于jQuery表格增加删除代码示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- shell中条件判断if中的-z到-d
shell中条件判断if中的-z到-d的意思 [ -a FILE ] 如果 FILE 存在则为真. [ -b FILE ] 如果 FILE 存在且是一个块特殊文件则为真.[ -c FILE ] 如果 ...
- thinkphp5权限仿制
权限列表 流程 thinkphp5封装好的权限模块 RBAC还有auth and then .......管理员表,可以依据auth.php搭建所有的权限表
- Unity3D资源
1.ShareSDK 地址:https://github.com/MobClub/New-Unity-For-ShareSDK 文档:产品集成步骤 2.Protobuf https://github. ...
- 吴恩达+neural-networks-deep-learning+第二周作业
Logistic Regression with a Neural Network mindset v4 简单用logistic实现了猫的识别,logistic可以被看做一个简单的神经网络结构,下面是 ...
- Java多线程和并发（二），Thread中的start和run的区别
目录 1.调用run方法 2.调用start方法 3.start和run的区别 二.Thread中的start和run的区别 1.调用run方法 public class ThreadTest { p ...
- POJ 3422 矩阵取数 最小费用流拆点+负边
Kaka's Matrix Travels Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9153 Accepted: ...
- 【UOJ#129】 【NOI2015】寿司晚宴
题目描述 为了庆祝 NOI 的成功开幕,主办方为大家准备了一场寿司晚宴.小 G 和小 W 作为参加 NOI 的选手,也被邀请参加了寿司晚宴. 在晚宴上,主办方为大家提供了 n−1 种不同的寿司,编号 ...
- 论文阅读：Camdoop: Exploiting In-network Aggregation for Big Data Applications
摘要: 大公司与中小型企业每天都在批处理作业和实时应用程序中处理大量数据,这会产生大量的网络流量,而使用传统的的网络基础架构则很难支持.为了解决这个问题已经提出了几种新颖的网络拓扑,旨在增加企业集群中 ...
- Spring Boot教程（三十二）多数据源配置与使用（1）
之前在介绍使用JdbcTemplate和Spring-data-jpa时,都使用了单数据源.在单数据源的情况下,Spring Boot的配置非常简单,只需要在application.propertie ...
- echarts 有关饼形图和map的使用技巧1(饼图)
http://blog.csdn.net/yhn1121/article/details/52041742 先上个链接,百度无意间搜到的,写得比我全面,可以直接飞去看它: 之前写网页用过echarts ...