基于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 ...
随机推荐
- 24. ClustrixDB 持久性配置文件
这些持久性选项不适用于内存中的表.有关更多信息,请参见内存表. ClustrixDB提供了一个选项,通过指定如何提交事务并使其持久,从而提高性能.当提交成功通知应用程序时,用户可以在提交过程中指定提交 ...
- linux crontab 定时任务，任务命令单独linux执行正常，放定时任务就不执行了，解决办法 （原）
这是我crontab里面的内容 */30 * * * * ./usr/bin/wget -q -O sync_log.txt http://fly.dllm.cn/index.php/Home/In ...
- phoenix-hbase 使用
建表命令 CREATE TABLE IF NOT EXISTS "person_mul"( "ROW" varchar primary key, //主键,必须 ...
- nginx 与location语法详解
Location语法优先级排列 匹配符 匹配规则 优先级 = 精确匹配 1 ^~ 以某个字符串开头 2 ~ 区分大小写的正则匹配 3 ~* 不区分大小写的正则匹配 4 !~ 区分大小写不匹配的正则 ...
- python3笔记六：for语句
一:学习内容 for语句 二:for-in语句 1. 格式 for 变量名 in 集合: 语句 2.逻辑 按顺序取集合中的每个元素赋值给变量,再去执行语句,如此循环往复 3.举例 for i i ...
- Git：本地项目与远程仓库的git/clone
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_40197828/article/details/79283278 初识Git命令行将本地项 ...
- centos7 php5.5 mongodb安装
1.下载最新php MongoDB扩展源码 https://pecl.php.net/package/mongodb 最新的1.6不支持PHP5.5,得用老版本,1.5.5 wget https:// ...
- oracle delete 数据恢复
/*1.FLASHBACK QUERY*/ --闪回到15分钟前 select * from orders as of timestamp (systimestamp - interval ''1 ...
- leetcode 140 单词拆分2 word break II
单词拆分2,递归+dp, 需要使用递归,同时使用记忆化搜索保存下来结果,c++代码如下 class Solution { public: //定义一个子串和子串拆分(如果有的话)的映射 unorder ...
- leetcode 230二叉搜索树中第k小的元素
通过stack进行中序遍历迭代,timeO(k),spaceO(1) /** * Definition for a binary tree node. * struct TreeNode { * in ...