elementUI表格----合并单元格

最新推荐文章于 2024-08-22 17:39:07 发布
最新推荐文章于 2024-08-22 17:39:07 发布
阅读量470 收藏
点赞数
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45856221/article/details/128239954
版权

直接复制到文件中，看看就能明白怎么用

原文地址：

https://blog.csdn.net/qq_14993591/article/details/124048897

<template>
   <el-table
        :data="tableData"
        border
        :span-method="objectSpanMethod"
        style="width: 100%;text-align:center;border:1px solid #d9d9d9"
        :cell-style="{background:'#ffffff'}"
        :header-cell-style="{
          background: '#ffffff',
          color: '#333',
          fontSize: '13px',
          'text-align': 'center'
        }"
      >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">{{scope.$index+(pageIndex - 1) * pageSize + 1}}</template>
        </el-table-column>
        <el-table-column prop="APTITUDEKINDNAME" label="资质类别" width="150"></el-table-column>
        <el-table-column prop="CertID" label="资质证书编号" width="200"></el-table-column>
        <el-table-column prop="Zzmark" label="资质名称" width="250"></el-table-column>
        <el-table-column prop="OrganDate" label="发证日期" width="130"></el-table-column>
        <el-table-column prop="EndDate" label="	发证有效期" width="130"></el-table-column>
        <el-table-column prop="OrganName" label="	发证机关" width="178"></el-table-column>
        <el-table-column label="预览" prop="MOVE" width="110">
          <template slot-scope="scope">
            <span
              @click="certInfo(scope.row.CertID,_self.type)"
              style="color:#ff6600;cursor: pointer;"
            >证书信息</span>
          </template>
        </el-table-column>
      </el-table>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return{
      tableData: [
        {"APTITUDEKINDNAME":"安全生产许可","CertID":"（浙）JZ安许证字[2014]021262","OrganName":"浙江省住房和城乡建设厅","UnitMan":"王浩明","OrganDate":"2014年10月13日","EndDate":"2023年09月23日","Zzmark":"","TechManDuty":"","TechMan":"王晓勤"},
        {"APTITUDEKINDNAME":"建筑业","CertID":"D233020828","OrganName":"浙江省建设厅","UnitMan":"王浩明","OrganDate":"2017年07月06日","EndDate":"2021年02月03日","Zzmark":"电子与智能化工程专业承包贰级","TechManDuty":"","TechMan":null},
        {"APTITUDEKINDNAME":"建筑业","CertID":"D233020828","OrganName":"浙江省建设厅","UnitMan":"王浩明","OrganDate":"2017年07月06日","EndDate":"2021年02月03日","Zzmark":"建筑装修装饰工程专业承包贰级","TechManDuty":"","TechMan":null},
        {"APTITUDEKINDNAME":"建筑业","CertID":"D333011719","OrganName":"宁波市住房和城乡建设委员会","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"建筑机电安装工程专业承包叁级","TechManDuty":"","TechMan":null},
        {"APTITUDEKINDNAME":"建筑业","CertID":"D333011719","OrganName":"宁波市住房和城乡建设委员会","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"市政公用工程施工总承包叁级","TechManDuty":"","TechMan":null},
        {"APTITUDEKINDNAME":"建筑业","CertID":"D333011719","OrganName":"宁波市住房和城乡建设委员会","UnitMan":"王浩明","OrganDate":"2017年07月03日","EndDate":"2021年12月31日","Zzmark":"建筑工程施工总承包叁级","TechManDuty":"","TechMan":null}
      ], 
       spanArr:[],
      contentSpanArr:[],
      contentSpanArr_3:[],
      contentSpanArr_4:[],
      contentSpanArr_5:[],
      contentSpanArr_6:[],
      contentSpanArr_7:[],
    }
  },
  mounted () {
    this.tableDatas();//目前数据默认是写死，所以直接执行该方法。项目中通过后台数据调用成功后，在表格渲染后执行该方法
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        console.log( row, column, rowIndex, columnIndex)
        console.log(this.spanArr)
      if (columnIndex === 1) {
        //合并资质类别
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 2) {
        //合并资质证书号
        const _row = this.contentSpanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    //   if (columnIndex === 3) {
    //     //合并资质名称
    //     const _row = this.contentSpanArr_3[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    //   if (columnIndex === 4) {
    //     //发证日期
    //     const _row = this.contentSpanArr_4[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    //   if (columnIndex === 5) {
    //     //发证有效期
    //     const _row = this.contentSpanArr_5[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    //   if (columnIndex === 6) {
    //     //发证机关
    //     const _row = this.contentSpanArr_6[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    //   if (columnIndex === 7) {
    //     //预览
    //     const _row = this.contentSpanArr_7[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    },
    // 表格合并方法
    tableDatas() {
      let contactDot = 0;
      let contactDot_1 = 0;
    //   let contactDot_2 = 0;
    //   let contactDot_3 = 0;
    //   let contactDot_4 = 0;
    //   let contactDot_5 = 0;
      let contactDot_6 = 0;
      this.spanArr = [];
      this.contentSpanArr = [];
    //   this.contentSpanArr_3 = [];
    //   this.contentSpanArr_4 = [];
    //   this.contentSpanArr_5 = [];
    //   this.contentSpanArr_6 = [];
      this.contentSpanArr_7 = [];
    //   this.APTITUDENAME = [];
      this.tableData.forEach((item, index) => {
          console.log(item)
        item.index = index;
        if (index === 0) {
          this.spanArr.push(1);
          this.contentSpanArr.push(1);
        //   this.contentSpanArr_3.push(1);
        //   this.contentSpanArr_4.push(1);
        //   this.contentSpanArr_5.push(1);
        //   this.contentSpanArr_6.push(1);
          this.contentSpanArr_7.push(1);
        } else {
          // 判断第二列
          if (
            item.APTITUDEKINDNAME === this.tableData[index - 1].APTITUDEKINDNAME
          ) {
            this.spanArr[contactDot] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            contactDot = index;
          }
          //判断第三列
          if (item.CertID === this.tableData[index - 1].CertID) {
            this.contentSpanArr[contactDot_1] += 1;
            this.contentSpanArr.push(0);
            this.contentSpanArr_7[contactDot_6] += 1;
            this.contentSpanArr_7.push(0);
          }
           else {
            this.contentSpanArr.push(1);
            contactDot_1 = index;
            this.contentSpanArr_7.push(1);
            contactDot_6 = index;
          }
        //   //资质证书编号
        //   if (item.Zzmark === this.tableData[index - 1].Zzmark) {
        //     this.contentSpanArr_3[contactDot_2] += 1;
        //     this.contentSpanArr_3.push(0);
        //   } else {
        //     this.contentSpanArr_3.push(1);
        //     contactDot_2 = index;
        //   }
        //   //发证日期
        //   if (item.OrganDate === this.tableData[index - 1].OrganDate) {
        //     this.contentSpanArr_4[contactDot_3] += 1;
        //     this.contentSpanArr_4.push(0);
        //   } else {
        //     this.contentSpanArr_4.push(1);
        //     contactDot_3 = index;
        //   }
        //   //发证有效期
        //   if (item.EndDate === this.tableData[index - 1].EndDate) {
        //     this.contentSpanArr_5[contactDot_4] += 1;
        //     this.contentSpanArr_5.push(0);
        //   } else {
        //     this.contentSpanArr_5.push(1);
        //     contactDot_4 = index;
        //   }
        //   //发证机关
        //   if (item.OrganName === this.tableData[index - 1].OrganName) {
        //     this.contentSpanArr_6[contactDot_5] += 1;
        //     this.contentSpanArr_6.push(0);
        //   } else {
        //     this.contentSpanArr_6.push(1);
        //     contactDot_5 = index;
        //   }
        }
      });
    },
  }
}
</script>
<style scoped>

</style>

在线笔记
关注
element ui表格合并单元格
小兔&崽子的博客
03-31 950
element ui表格合并单元格 效果：下面数据做了一下扁平化，主要是这里的数据结构不太符合，如果你的数据结构符合遍历可以不用这一步，当然这里扁平化的时候增加了合并的行数rowspan 和 序号 itemIndex。如若没这一步注意自行计算合并行数和序号。 表格代码： <el-table border ref="multipleTable" :height="tableHeight" :data="tableData"
elementUI表格合并单元格
L221545的博客
05-26 1187
elementUI表格合并单元格
element ui Table 表格分单元格左右合并支持动态数据
weixin_45368519的博客
08-22 529
element ui 实现表格的部分左右相同数据合并单元格显示
Element UI 的 table 单元格合并
热门推荐
beijixing333y的博客
06-21 1万+
Element UI 的 table 单元格合并
ElementUI el-table 动态合并单元格
hrcsdn13的博客
07-09 1097
三、批次与表格数据是双向的，通过批次操作栏操作批次会引起表格数据变化，添加、删除、在表格中修改批次数量也会引起批次操作栏的变化。二、下方是对批次的校验；
element-ui中的el-table合并单元格
m0_63026408的博客
08-24 8023
例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据。处理不及时时，会造成先传的数据被覆盖，进而导致数据丢失。发送消息有两种方式，分别是。对象，并将读取到的数据存入。方式当数据量过大时，由于。
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
vue2+elementui 实现table表格列分割
08-09
以vue组件的方式，实现vue2结合elementui table表格实现列分割，你可以直接将改文件下载下来，然后可以学习span-method方法进行个性化的列分割
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
我们在这里定义这个方法，以便根据需要合并单元格。 ```javascript methods: { objectOneMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const _row = this.setTable(this....
Element ui el-table 合并单元格
m0_56540662的博客
06-16 1725
mergeRecording: [], // 合并记录 存放需要合并列的每行对应的合并数 [[当前行对应的合并数, 当前行对应的合并数, ...], ...]this.mergeRecording[i].push(count) // 本单元格的合并的开头索引值。this.mergeObj[key][count] += 1 // 上一行的合并数+1。this.mergeRecording[i] = [] // 记录本列合并的开头索引值。this.mergeObj[key] = [] // 记录合并数组。
element-ui中Table表格省市区合并单元格的方法实现
10-16
主要介绍了element-ui中Table表格省市区合并单元格的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui表格单元格合并
csychencsy的博客
06-13 1437
使用的是element中的 :span-method="objectSpanMethod"其中 rowspan() 方法是筛选出需要合并的单元格。需求是把每一列数据中相同的bom.id合并。
elementUI中表格单元格合并（拿来即用）
Muchen灬
08-12 5112
elementUI中表格单元格合并 <!-- * @Description: elment table表单合并单元格 * @Version: * @Autor: Muchen * @Date: 2021-08-12 09:38:08 * @LastEditors: Muchen * @LastEditTime: 2021-08-12 10:40:13 --> <template> <div class="app-container home">
elementui的table合并单元格
weixin_72915158的博客
08-17 1668
当我们项目中多个页面都需要用到合并相同字段。一个页面一个页面的写太过于繁琐，所以封装了公共js：合并单元格提示：以下是本篇文章正文内容，下面案例可供参考以上就是今天要讲的内容，本文仅仅简单介绍了公共js封装以及使用合并单元格。
element-UI table合并单元格
weixin_44236722的博客
04-01 488
##建议先看一下官方文档 了解一下表格各个属性的意义； 但你会发现此例过于简单，死数据，但我们开发的时候往往都是后台传递过来的数据，导致我们 rowspan 的参数需要自己做判断，根据数据的相同行（或列）进行合并； 效果： 代码： <template> <div class=""> <el-table :data="listData" ...
element ui 的table单元格合并
weixin_46103180的博客
04-12 1万+
elementUI的table表格实现单元格合并
elementUI表格树结构合并单元格
最新发布
09-14
其中，表格组件支持展示数据的各种形式，包括树形结构的表格，而单元格合并则是通过表格的合并单元格功能来实现的。 在Element UI中，表格树形结构的合并单元格通常需要结合表格的`span-method`属性来使用。`span-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值