element-ui 合并行单元格，列

已于 2023-09-06 16:12:24 修改
阅读量439 收藏
点赞数 1
文章标签： ui elementui vue
于 2023-09-06 16:09:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45967343/article/details/132717267
版权

结果截图

在这里插入图片描述

找出数组连续重复下标函数

findIndexs(array) {
      /* 
          @params:数组
          return：一个包含重复序列，开始索引和结束索引的数组
          如：
          [
            {start:0;end:2
            },
            {start:3;end:5}
          ]

      */
      let current = array[0];
      let result = []; //返回结果
      let startIndex = 0;
      for (let i = 1; i < array.length; i++) {
        if (array[i] != current) {
          result.push({ start: startIndex, end: i - 1 });
          current = array[i];
          startIndex = i;
        }
      }
      result.push({ start: startIndex, end: array.length - 1 });
      return result;
    },

合并函数

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //部门行合并
      for (let i = 0; i < this.deptGroups.length; i++) {
        if (columnIndex == 0) {
          //从第0列开始
          if (rowIndex == this.deptGroups[i].start) {
            //行数=start
            return [this.deptGroups[i].end - this.deptGroups[i].start + 1, 1]; // 将start行的高度增加到end-start+1
          }
          if (
            rowIndex <= this.deptGroups[i].end &&
            rowIndex > this.deptGroups[i].start
          ) {
            //将(start,end]的单元格都清除
            return [0, 0];
          }
        }
      }

      //项目列合并
      for (let i = 0; i < this.indexGroups.length; i++) { //外层循环是行
        for (let j = 0; j < this.indexGroups[i].length; j++) { //内层循环是每一行对应的重复元素数组，即findIndexs的返回值
          if (rowIndex == i) { //从第i行开始
            if (columnIndex == this.indexGroups[i][j].start + this.step) { //step为4，指定从第step列开始
              return [
                1,
                this.indexGroups[i][j].end - this.indexGroups[i][j].start + 1, //同行合并一样
              ];
            }
            if (
              columnIndex <= this.indexGroups[i][j].end + this.step &&
              columnIndex > this.indexGroups[i][j].start + this.step
            ) {
              return [0, 0]; //消除合并的单元格
            }
          }
        }
      }
    },

data数据

data(){
    return {
      tableData: [
        {
          dept: "产品研发部",
          name: "张三",
          area: "上海",
          identity: "正式员工",
          projectList: [
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
          ],
        },
        {
          dept: "产品研发部",
          name: "李四",
          area: "北京",
          identity: "正式员工",
          projectList: [
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目b" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
          ],
        },
        {
          dept: "需求组",
          name: "王五",
          area: "天津",
          identity: "正式员工",
          projectList: [
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目b" },
            { project: "项目b" },
            { project: "项目c" },
            { project: "项目c" },
            { project: "项目c" },
            { project: "项目d" },
            { project: "项目d" },
            { project: "项目d" },
            { project: "项目a" },
          ],
        },
        {
          dept: "需求组",
          name: "李华",
          area: "天津",
          identity: "正式员工",
          projectList: [
            { project: "项目a" },
            { project: "项目b" },
            { project: "项目c" },
            { project: "项目d" },
            { project: "项目e" },
            { project: "项目f" },
            { project: "项目g" },
            { project: "项目h" },
            { project: "项目i" },
            { project: "项目j" },
            { project: "项目k" },
            { project: "项目l" },
          ],
        },
        {
          dept: "系统集成部",
          name: "李雷",
          area: "上海",
          identity: "正式员工",
          projectList: [
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目c" },
            { project: "项目d" },
            { project: "项目e" },
            { project: "项目e" },
            { project: "项目g" },
            { project: "项目i" },
            { project: "项目i" },
            { project: "项目i" },
            { project: "项目k" },
            { project: "项目l" },
          ],
        },
      ],

      //表头
      tabHeader: [
        { prop: "dept", label: "部门", width: 180 },
        { prop: "name", label: "姓名" },
        { prop: "area", label: "所属地" },
        { prop: "identity", label: "身份" },
        { prop: "projectList[0].project", label: "2022.09" },
        { prop: "projectList[1].project", label: "2022.10" },
        { prop: "projectList[2].project", label: "2022.11" },
        { prop: "projectList[3].project", label: "2022.12" },
        { prop: "projectList[4].project", label: "2023.01" },
        { prop: "projectList[5].project", label: "2023.02" },
        { prop: "projectList[6].project", label: "2023.03" },
        { prop: "projectList[7].project", label: "2023.04" },
        { prop: "projectList[8].project", label: "2023.05" },
        { prop: "projectList[9].project", label: "2023.06" },
        { prop: "projectList[10].project", label: "2023.07" },
        { prop: "projectList[11].project", label: "2023.08" },
      ],
      indexGroups: [], // 生成的重复序列索引
      deptGroups: [], //生成的重复部门序列
      step: 4, //非月份列

完整代码

  <div>
    <!--  :span-method="arraySpanMethod" -->
    <el-table
      :data="tableData"
      border
      :span-method="arraySpanMethod"
      style="width: 100%"
      @cell-click="cellClick"
    >
      <el-table-column
        align="center"
        v-for="(item, index) in tabHeader"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "ManageFrontSystemRole",

  data() {
    return {
      tableData: [
        {
          dept: "产品研发部",
          name: "张三",
          area: "上海",
          identity: "正式员工",
          projectList: [
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
          ],
        },
        {
          dept: "产品研发部",
          name: "李四",
          area: "北京",
          identity: "正式员工",
          projectList: [
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目b" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
          ],
        },
        {
          dept: "需求组",
          name: "王五",
          area: "天津",
          identity: "正式员工",
          projectList: [
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目b" },
            { project: "项目b" },
            { project: "项目c" },
            { project: "项目c" },
            { project: "项目c" },
            { project: "项目d" },
            { project: "项目d" },
            { project: "项目d" },
            { project: "项目a" },
          ],
        },
        {
          dept: "需求组",
          name: "李华",
          area: "天津",
          identity: "正式员工",
          projectList: [
            { project: "项目a" },
            { project: "项目b" },
            { project: "项目c" },
            { project: "项目d" },
            { project: "项目e" },
            { project: "项目f" },
            { project: "项目g" },
            { project: "项目h" },
            { project: "项目i" },
            { project: "项目j" },
            { project: "项目k" },
            { project: "项目l" },
          ],
        },
        {
          dept: "系统集成部",
          name: "李雷",
          area: "上海",
          identity: "正式员工",
          projectList: [
            { project: "项目a" },
            { project: "项目a" },
            { project: "项目c" },
            { project: "项目d" },
            { project: "项目e" },
            { project: "项目e" },
            { project: "项目g" },
            { project: "项目i" },
            { project: "项目i" },
            { project: "项目i" },
            { project: "项目k" },
            { project: "项目l" },
          ],
        },
      ],

      //表头
      tabHeader: [
        { prop: "dept", label: "部门", width: 180 },
        { prop: "name", label: "姓名" },
        { prop: "area", label: "所属地" },
        { prop: "identity", label: "身份" },
        { prop: "projectList[0].project", label: "2022.09" },
        { prop: "projectList[1].project", label: "2022.10" },
        { prop: "projectList[2].project", label: "2022.11" },
        { prop: "projectList[3].project", label: "2022.12" },
        { prop: "projectList[4].project", label: "2023.01" },
        { prop: "projectList[5].project", label: "2023.02" },
        { prop: "projectList[6].project", label: "2023.03" },
        { prop: "projectList[7].project", label: "2023.04" },
        { prop: "projectList[8].project", label: "2023.05" },
        { prop: "projectList[9].project", label: "2023.06" },
        { prop: "projectList[10].project", label: "2023.07" },
        { prop: "projectList[11].project", label: "2023.08" },
      ],
      indexGroups: [], // 生成的重复序列索引
      deptGroups: [], //生成的重复部门序列
      step: 4, //非月份列
    };
  },
  created() {
    this.generateIndexGroups(this.tableData);
    this.deptGroups = this.findIndexs(this.tableData.map((i) => i.dept));
    // console.log(this.deptGroups);
  },
  mounted() {},

  methods: {
    //单元格合并函数
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //部门行合并
      for (let i = 0; i < this.deptGroups.length; i++) {
        if (columnIndex == 0) {
          //从第0列开始
          if (rowIndex == this.deptGroups[i].start) {
            //行数=start
            return [this.deptGroups[i].end - this.deptGroups[i].start + 1, 1]; // 将start行的高度增加到end-start+1
          }
          if (
            rowIndex <= this.deptGroups[i].end &&
            rowIndex > this.deptGroups[i].start
          ) {
            //将(start,end]的单元格都清除
            return [0, 0];
          }
        }
      }

      //项目列合并
      for (let i = 0; i < this.indexGroups.length; i++) {
        //外层循环是行
        for (let j = 0; j < this.indexGroups[i].length; j++) {
          //内层循环是每一行对应的重复元素数组，即findIndexs的返回值
          if (rowIndex == i) {
            //从第i行开始
            if (columnIndex == this.indexGroups[i][j].start + this.step) {
              //step为4，指定从第step列开始
              return [
                1,
                this.indexGroups[i][j].end - this.indexGroups[i][j].start + 1, //同行合并一样
              ];
            }
            if (
              columnIndex <= this.indexGroups[i][j].end + this.step &&
              columnIndex > this.indexGroups[i][j].start + this.step
            ) {
              return [0, 0]; //消除合并的单元格
            }
          }
        }
      }
    },

    //单元格点击
    cellClick(row, column, cell, event) {
      alert(cell.textContent);
    },
    //找出数组连续重复下标
    findIndexs(array) {
      /* 
          @params:数组
          return：一个包含重复序列，开始索引和结束索引的数组
          如：
          [
            {start:0;end:2
            },
            {start:3;end:5}
          ]

      */
      let current = array[0];
      let result = []; //返回结果
      let startIndex = 0;
      for (let i = 1; i < array.length; i++) {
        if (array[i] != current) {
          result.push({ start: startIndex, end: i - 1 });
          current = array[i];
          startIndex = i;
        }
      }
      result.push({ start: startIndex, end: array.length - 1 });
      return result;
    },

    //生成对应tabList结构的indexGroups
    generateIndexGroups(data) {
      let tmp = data.map((i) => i.projectList);
      let newPro = [];
      tmp.forEach((item) => {
        newPro.push(item.map((item) => item.project));
      });
      let result = newPro.map((item) => this.findIndexs(item));
      this.indexGroups = result;
    },
  },
};
</script>

<style lang="scss" scoped></style>
qq_45967343
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element ui表格合并单元格
小兔&崽子的博客
03-31 918
element ui表格合并单元格 效果：下面数据做了一下扁平化，主要是这里的数据结构不太符合，如果你的数据结构符合遍历可以不用这一步，当然这里扁平化的时候增加了合并的行数rowspan 和 序号 itemIndex。如若没这一步注意自行计算合并行数和序号。 表格代码： <el-table border ref="multipleTable" :height="tableHeight" :data="tableData"
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
【Vue+el-element】表格相同数据合并单元格
zuo0407的博客
09-16 378
博客第二天纪念日 今天挑战表格第一列相同数据合并单元格，其他列不同数据添加到一行显示 element中有表格合并的方法： 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。详见链接: element表格. 其
ElementUI el-table 动态合并单元格
最新发布
hrcsdn13的博客
07-09 547
三、批次与表格数据是双向的，通过批次操作栏操作批次会引起表格数据变化，添加、删除、在表格中修改批次数量也会引起批次操作栏的变化。二、下方是对批次的校验；
elementui 合并单元格
QS8945的博客
07-05 523
合并单元格
elementUI表格合并单元格
热门推荐
兰亭古墨
09-19 3万+
相信你肯定看了 ElementUI 官方文档了，没看的话先去看下表格各个属性的意义，方便下文阅读：传送门 但你会发现此例过于简单，死数据，但我们开发的时候往往都是后台传递过来的数据，导致我们 rowspan 的参数需要自己做判断，根据数据的相同行（或列）进行合并； 我们先看下结果：  代码附上： &lt;template&gt; &lt;div class=""&gt; ...
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
本文将详细介绍如何在Vue中使用Element-UI的`el-table`组件来合并上下两行相同数据的单元格。 首先，我们需要在HTML模板中设置`el-table`组件。在以下示例中，我们定义了一个表格，包含四个列（项目名称、污染区段...
element-ui表格合并span-method的实现方法
10-16
在Element-UI框架中，表格（`el-table`）组件提供了强大的功能，其中包括表格单元格的合并。在处理复杂表格布局时，有时我们需要合并某些行或列以展示更清晰的数据结构。`span-method`属性正是为此目的而设计的，它...
element-ui中Table表格省市区合并单元格的方法实现
01-19
本文介绍了element-ui中Table表格省市区合并单元格的方法实现，分享给大家，具体如下： 效果如图 代码如下: <el inline=true model=formInline class=demo-form-inline> 搜索> <el v-model=formInline....
vue+element-ui动态生成多级表头的方法
10-18
在描述中提到的“vue+element”方法，主要涉及到Vue.js框架和Element-UI库的结合使用，特别是Element-UI中的`el-table`组件，这个组件支持自定义列、排序、筛选等功能，非常适合构建复杂的表格布局。 动态生成多级...
elementui的table合并单元格
weixin_72915158的博客
08-17 1567
当我们项目中多个页面都需要用到合并相同字段。一个页面一个页面的写太过于繁琐，所以封装了公共js：合并单元格提示：以下是本篇文章正文内容，下面案例可供参考以上就是今天要讲的内容，本文仅仅简单介绍了公共js封装以及使用合并单元格。
Element-UI 合并单元格
真正的掌握了一个技术就是，忘记它并能够熟练地使用它
02-16 737
合并前两列相邻行之间值相同的单元格 arraySpanMethod({ row, // column, rowIndex, columnIndex }) { // 合并行列产品名字相同合并（计算组长度以内的列，需要进行合并操作的列） let mergeLength = 2; //需要进行横纵合并的列 if (columnIndex < mergeLength) { let finArray = [1, 1]; // 处理行数据 let cgname =
element-ui表格单元格合并
csychencsy的博客
06-13 1382
使用的是element中的 :span-method="objectSpanMethod"其中 rowspan() 方法是筛选出需要合并的单元格。需求是把每一列数据中相同的bom.id合并。
vue elementUI合并单元格
mengqudoh的博客
02-10 853
el-table合并
elementUI合并单元格
weixin_44334950的博客
05-10 3277
element ui 单元格合并的原理。
elementui 动态合并单元格
陆仁丶的博客
10-27 4100
效果图 废话不多说直接上代码 1、:span-method=“objectSpanMethod” 在table属性中启用合并单元格方法 <el-table class="mytable" :data="drugDeptApplyDetailVOs" style="width: 100%;height: 600px;overflow: scroll" border @selecti
element-ui表格的合并单元格（合并行合并列
JandyPam的博客
05-18 431
解决element ui表格组件合并单元格的问题
el-table 行合并elementplus
09-20
el-table 行合并是通过使用 span-method 属性实现的。首先，在你的页面模板中，使用 <el-table> 标签，并设置 :span-method 属性为 spanMethod 方法。在你的 spanMethod 方法中，返回一个包含 rowspan 和 colspan 属性的对象，用于指定需要合并的行和列数。 具体操作如下所示： 1. 在你的页面中导入 el-table 组件和行合并所需的方法文件，可以使用 import {getRowSpanMethod} from '@/hook/el-tables/use-span-method.js' 语句。 2. 在页面的 data 方法中，定义 spanMethod 方法，并将其初始化为一个默认方法，以确保数据正常显示。默认方法应返回一个包含 rowspan: 0 和 colspan: 0 属性的对象。 3. 在 methods 方法中，添加一个 getTableData 方法，并在其中调用接口查询表格数据。查询到的数据保存在名为 data 的变量中。 4. 在 getTableData 方法中，使用 getRowSpanMethod 方法获取到需要合并的列。将查询到的数据和需要合并的列作为参数传递给 getRowSpanMethod 方法，并将返回的结果赋值给 spanMethod 方法。 在以上步骤完成后，你的 el-table 表格将使用 spanMethod 方法实现行合并效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值