基于element表格的合并多个行实例
2024-08-27 16:21:21
官方示例地址：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
}
]
}
最新文章
- [LeetCode] Recover Binary Search Tree 复原二叉搜索树
- “全能”选手—Django 1.10文档中文版Part3
- MVC架构模式分析与设计（一）---简单的mvc架构
- T-SQL 基础学习 02
- CentOS 7 安装 vmware-tools
- html里文本编辑器如何制作呢？
- CDN技术分享
- 使用EXISTS语句注意点
- MySQL 使用explain查看执行计划
- leetcode 349：两个数组的交集I
- DeleteDC() 与 ReleaseDC() 的区别 [转]
- iOS5.1下emoji表情显示方框的解决办法
- flipsnap.js 源码阅读备份
- Java之集合初探（二）Iterator（迭代器），collections，打包/解包（装箱拆箱），泛型(Generic)，comparable接口
- 01迷宫 洛谷 p1141
- problem: 记一次聊天框的表情包弹框不显示的找问题过程
- Mybatis常用代码
- API知识点总结
- Android之Wifi学习(1)
- 自学Zabbix13.1 分布式监控proxy介绍