官方示例地址: 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
- }
- ]
- }
来源: http://www.bubuko.com/infodetail-3313671.html