基于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
        }
    ]
}

猜你喜欢

转载自www.cnblogs.com/pangchunlei/p/11973460.html
今日推荐