基于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 ...
随机推荐
- qt5--自定义控件封装
视频教程地址:https://www.bilibili.com/video/av51766541/?p=30
- k8s测试容器test-for-k8s.yml
生成容器 vim test-for-k8s.yml apiVersion: v1 kind: Pod metadata: name: busybox-curl labels: ccb: busybox ...
- win10 1903 更改文字大小
标题栏 - 菜单 - 消息框 - 调色板标题11- 图标 - 工具提示 - Caption 标题 的 宽/高 - ; 14的宽高 - 菜单 的 宽/高 - ; 的宽高 -; 设置 注册表 HKEY_C ...
- python 数据库插入操作
数据库插入操作 以下实例使用执行 SQL INSERT 语句向表 EMPLOYEE 插入记录: #!/usr/bin/python # -*- coding: UTF-8 -*- import MyS ...
- sleep() 、join（）、yield（）有什么区别
1sleep()方法 在指定的毫秒数内让当前正在执行的线程休眠(暂停执行).此操作受到系统计时器和调度程序精准和准确性的影响,让其他线程有机会继续执行,但是它不释放对象锁.也就是如果有synchron ...
- JavaWeb_(SSH论坛)_三、用户模块
基于SSH框架的小型论坛项目 一.项目入门 传送门 二.框架整合 传送门 三.用户模块 传送门 四.页面显示 传送门 五.帖子模块 传送门 六.点赞模块 传送门 七.辅助模块 传送门 User表 id ...
- ...扩展运算符+rest参数+call/apply/bind
之前在set,map里面有提过扩展运算符的概念,但是今天偶然遇到一个问题,类似于扩展运算符的经典用法,突然发现对其了解不是很深,所以再来整理一下扩展运算符的相关知识. 重点:扩展运算符内部调用的是数据 ...
- vue 移动端的开发
一:cli 的安装: cnpm install -g @vue/cli默认是安装在如下目录:C:\Users\xiaocj\AppData\Roaming\npm\node_modules\@vue ...
- C++入门经典-例5.14-丢失的内存，关于内存泄漏
1:代码如下: // 5.14.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...
- Eclipse控制台输出中文乱码问题的解决
啥都不说,上图: 1.console控制台打印乱码 2.右键: Run As --> Run Configurations 3.找到common项,在“Encoding”栏,看到当前用的是默认“ ...