VUE + element 实现表格----（纵向，横向）合并，带JSON的demo，复制就可用

于 2020-05-12 10:55:05 发布
阅读量3.2k 收藏 17
点赞数 5
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jyin_/article/details/106071168
版权 
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<div id="app">
   <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="dynamic-table" label-width="0">
    <el-table 
     :data="dynamicValidateForm.domains"
     :span-method="objectSpanMethod" 
     stripe
     border
     fit
     size="mini"
    >
     <el-table-column label="主体" prop="NAME" width="60" align="center"></el-table-column>
     <el-table-column label="一级指标" prop="SCORE"  width="80" align="center"></el-table-column>
     <el-table-column label="二级指标" prop="CONTENT"  width="80" align="center"></el-table-column>
     <el-table-column  label="Q1" align="center">
      <el-table-column prop="Jan" label="Jan" align="center" width="60"> </el-table-column>
      <el-table-column prop="Feb" label="Feb" align="center"  width="60"> </el-table-column>
      <el-table-column prop="Mar" label="Mar" align="center"  width="60"> </el-table-column>
     </el-table-column>
     <el-table-column  label="Q2" align="center">
      <el-table-column prop="Apr" label="Apr" align="center"  width="60"> </el-table-column>
      <el-table-column prop="May" label="May" align="center"  width="60"> </el-table-column>
      <el-table-column prop="Jun" label="Jun" align="center"  width="60"> </el-table-column>
     </el-table-column>
     <el-table-column  label="Q3" align="center">
      <el-table-column prop="Jul" label="Jul" align="center"  width="60"> </el-table-column>
      <el-table-column prop="Aug" label="Aug" align="center"  width="60"> </el-table-column>
      <el-table-column prop="Sep" label="Sep" align="center"  width="60"> </el-table-column>
     </el-table-column>
     <el-table-column  label="Q4" align="center">
      <el-table-column prop="Oct" label="Oct" align="center" width="60"> </el-table-column>
      <el-table-column prop="Nov" label="Nov" align="center"  width="60"> </el-table-column>
      <el-table-column prop="Dec" label="Dec" align="center"  width="60"> </el-table-column>
     </el-table-column>
     <el-table-column prop="nian" label="年度" align="center"></el-table-column>
     <el-table-column prop="zong" :label="'1-N月\n合计'" align="center" width="60"></el-table-column>
    </el-table>
   </el-form>
  </div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
   new Vue({
    el: '#app',
    data() {
     return {
      list: [],
      listLoading: true,
      dynamicValidateForm: {
       domains: []
      },
      spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
      pos: 0, // spanArr 的索引
      contentSpanArr: [],
      position: 0,
      tableData: [{
       index: 7,
       NAME: '张三',
       SCORE: '期末在职',
       CONTENT: '实际达成',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      }, 
      {
       index: 8,
       NAME: '张三',
       SCORE: '期末在职',
       CONTENT: '年初预计',
       STANDARD: '3.1231232',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      }, {
       index: 9,
       NAME: '张三',
       SCORE: '期末在职',
       CONTENT: '最新预计',
       STANDARD: '23eadas.2',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      },{
       index: 20,
       NAME: '张三',
       SCORE: '期末在职',
       CONTENT: '上年同期',
       STANDARD: '23eadas.2',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'      },
      {
       index: 16,
       NAME: '张三',
       SCORE: '净值',
       CONTENT: '实际达成',
       STANDARD: '3sfsf.2',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      },
      {
       index: 15,
       NAME: '张三',
       SCORE: '净值',
       CONTENT: '年初预计',
       STANDARD: '3sfsf.2',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      },
      {
       index: 11,
       NAME: '张三',
       SCORE: '净值',
       CONTENT: '最新预计',
       STANDARD: '3sfsf.2',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      }, {
       index: 12,
       NAME: '张三',
       SCORE: '净值',
       CONTENT: '上年同期',
       STANDARD: '1111',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      },
      {
       index: 17,
       NAME: '张三',
       SCORE: '入职',
       CONTENT: '实际达成',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      },{
       index: 47,
       NAME: '张三',
       SCORE: '入职',
       CONTENT: '年初达成',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      },
      {
       index: 27,
       NAME: '李四',
       SCORE: '期末在职',
       CONTENT: '年初达成',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      },
      {
       index: 28,
       NAME: '李四',
       SCORE: '期末在职',
       CONTENT: '年初预计',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      },
      {
       index: 29,
       NAME: '李四',
       SCORE: '期末在职',
       CONTENT: '最新预计',
       Jan:'1',
       Feb:'2',
       Mar:'3',
       Apr:'4',
       May:'5',
       Jun:'6',
       Jul:'7',
       Aug:'8',
       Sep:'9',
       Oct:'10',
       Nov:'11',
       Dec:'12',
       nian:'2011',
       zong:'2000'
      },
      ]
     };
    },
    created() {
     this.getList();
    },
    methods: {
     // 合并单元格
     objectSpanMethod({row,column,rowIndex,columnIndex}) {
      if (columnIndex === 0) {
       const _row = this.spanArr[rowIndex];
       const _col = _row > 0 ? 1 : 0;
       return {
        rowspan: _row,
        colspan: _col
       };
      } else if (columnIndex === 1) {
       const _row = this.contentSpanArr[rowIndex];
       const _col = _row > 0 ? 1 : 0;
       return {
        rowspan: _row,
        colspan: _col
       };
      }
     },
     // 获取列表数据
     getList() {
      this.dynamicValidateForm.domains = this.tableData || [];
      // 设定一个数组spanArr/contentSpanArr来存放要合并的格数，同时还要设定一个变量pos/position来记录
      this.spanArr = [];
      this.contentSpanArr = [];
      for (var i = 0; i < this.tableData.length; i++) {
       if (i === 0) {
        this.spanArr.push(1);
        this.pos = 0;
        this.contentSpanArr.push(1);
        this.position = 0;
       } else {
        // 判断当前元素与上一个元素是否相同(第1和第2列)
        if (this.tableData[i].NAME === this.tableData[i - 1].NAME) {
         this.spanArr[this.pos] += 1;
         this.spanArr.push(0);
        } else {
         this.spanArr.push(1);
         this.pos = i;
        }
        // 判断当前元素与上一个元素是否相同(第3列)
        if (this.tableData[i].SCORE === this.tableData[i - 1].SCORE) {
         this.contentSpanArr[this.position] += 1;
         this.contentSpanArr.push(0);
        } else {
         this.contentSpanArr.push(1);
         this.position = i;
        }
       }
      }
     }
    }
 });
  </script>

效果图在效果图这里插入图片描述

一道彩虹 两个人
关注
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值