基于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 ...
随机推荐
- java web课堂测试
下面是web界面 <%@ page language="java" import="java.util.*" pageEncoding="UTF ...
- 计算几何 点对处理 #345 (Div. 2) C. Watchmen
题目:给你n(<=2*1e5)个点,求其中有多少个点对之间的连线向量平行坐标轴: #include <iostream> #include <cstdio> #inclu ...
- codevs 5969 [AK]刻录光盘x
题目描述 Description • 在FJOI2010夏令营快要结束的时候,很多营员提出来要把整个夏令营期间的资料刻录成一张光盘给大家,以便大家回去后继续学 ...
- pycharm安装与永久激活
1.Pycham下载 https://www.jetbrains.com/pycharm/download/#section=windows 直接下载专业版 2.安装 这里就不必细说,直接next就O ...
- kmeans与kmeans++的python实现
一.kmeans聚类: 基本方法流程 1.首先随机初始化k个中心点 2.将每个实例分配到与其最近的中心点,开成k个类 3.更新中心点,计算每个类的平均中心点 4.直到中心点不再变化或变化不大或达到迭代 ...
- 我不熟悉的vector
构造函数 使用迭代器构造vector的一种方式: //将v[begin(), end())区间中的元素拷贝给本身 vector(v.begin(),v.end()); 在这个构造函数中,传入普通数组也 ...
- wkhtmltopdfhtml php生成pdf快照,网页截图,网页快照完整版 (原)
首先,安装(linux安装为例) 1.下载wkhtmltopdf wget http://download.gna.org/wkhtmltopdf/obsolete/linux/wkhtmltopdf ...
- JavaWeb_(SSH论坛)_七、辅助模块
基于SSH框架的小型论坛项目 一.项目入门 传送门 二.框架整合 传送门 三.用户模块 传送门 四.页面显示 传送门 五.帖子模块 传送门 六.点赞模块 传送门 七.辅助模块 传送门 为避免代码冗余, ...
- 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...
- Unity3D_(Shuriken粒子系统)制作简单的烟花爆炸效果
Unity中的粒子系统可以用于制作特效,如开枪火花效果,简单爆炸效果等.(毕竟程序员不是设计师,简单的特效都没有问题,要制作一些非常美观的特效还是需要多了解跟美术有关的知识.) 粒子系统实现一个简单的 ...