有关table组件列合并的方法

已于 2024-05-23 13:42:25 修改
阅读量505 收藏
点赞数 4
文章标签： vue.js javascript elementui
于 2024-05-19 11:54:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/armanted/article/details/139040478
版权

初始图：

最终效果：

代码实例：

html代码

 <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          prop="year"
          label="指标年度"
          width="90"
          align="center"
        />
        <el-table-column prop="type" label="指标类型" align="center" />
        <el-table-column prop="indexTotal" label="指标数量 " align="center" />
        <el-table-column
          prop="deptCompletionDegree"
          label="部门完成度 "
          align="center"
        />
        <el-table-column prop="nickName" label="详细分配 " align="center">
          </template>
        </el-table-column>
        <el-table-column
          prop="userCompletionDegree"
          label="项目负责人完成度 "
          align="center"
        />
      </el-table>

js代码

//表格数据
const tableData=[
    {
        "year": "2021",
        "type": 1,
        "indexTotal": 10,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2021",
        "type": 1,
        "indexTotal": 6,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2024",
        "type": 1,
        "indexTotal": 5,
        "deptCompletionDegree": "20%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2024",
        "type": 1,
        "indexTotal": 15,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2024",
        "type": 1,
        "indexTotal": 2,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    }
]

// 定义合并列对象数组
const mergeConfigs = ref([
  { key: "year", mergeArray: [1], mergeIndex: 0 },
  { key: "type", mergeArray: [1], mergeIndex: 0 },
  { key: "deptCompletionDegree", mergeArray: [1], mergeIndex: 0 },
]);
// 处理合并列数组方法
const getHistoryTableData = async () => {
  // 初始化第一个元素已经在声明时完成，不需要再进行初始化

  // 遍历 tableData 数组
  tableData .value.forEach((item: any, index: any) => {
    if (index === 0) return; // 第一个元素已经初始化过，跳过

    // 获取前一个元素
    const previousItem = tableData .value[index - 1];

    // 遍历合并配置，执行相应的合并逻辑
    mergeConfigs.value.forEach((config: any) => {
      const { key, mergeArray, mergeIndex } = config;

      if (item[key] === previousItem[key]) {
        // 当前元素与前一个元素相同，增加当前合并单元格的计数
        mergeArray[mergeIndex] += 1;
        // 在合并数组中添加一个0，表示这个位置不需要合并
        mergeArray.push(0);
      } else {
        // 当前元素与前一个元素不同，表示需要开始一个新的合并单元格
        mergeArray.push(1);
        // 更新索引为当前元素位置
        config.mergeIndex = index;
      }
    });
  });
};


const objectSpanMethod: any = ({ row, column, rowIndex, columnIndex }: any) => {
  // 合并列的字符串数组
  const tableMergeArr = ["year", "type", "deptCompletionDegree"];

  if (tableMergeArr.includes(column.property)) {
    // 找到合并列对象数组对应下标
    const colIndex = mergeConfigs.value.findIndex(
      (item: any) => item.key === column.property
    );
    return {
      //将需要合并的行数赋值给 _row，注意这里由上一个方法的输出[1,1,2,0]可以知道，
      rowspan: mergeConfigs.value[colIndex].mergeArray[rowIndex],
      //colspan有两种情况要不是0不显示，要不是1显示，根据rowspan（ _row）来确定；
      colspan: mergeConfigs.value[colIndex].mergeArray[rowIndex] > 0 ? 1 : 0,
    };
  }
};

设置后面的列合并数目不超过前面的

实现效果： 

实现代码：

//表格数据
const tableData=[
    {
        "year": "2021",
        "type": 1,
        "indexTotal": 10,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2021",
        "type": 1,
        "indexTotal": 6,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2024",
        "type": 1,
        "indexTotal": 5,
        "deptCompletionDegree": "20%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2024",
        "type": 1,
        "indexTotal": 15,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2020",
        "type": 1,
        "indexTotal": 2,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    }
]

// 定义合并列对象数组
const mergeConfigs = ref([
  { key: "year", mergeArray: [1], mergeIndex: 0 },
  { key: "type", mergeArray: [1], mergeIndex: 0 },
  { key: "deptCompletionDegree", mergeArray: [1], mergeIndex: 0 },
]);
// 处理合并列数组方法
const getHistoryTableData = async () => {
  // 初始化第一个元素已经在声明时完成，不需要再进行初始化

  // 遍历 tableData 数组
  tableData .value.forEach((item: any, index: any) => {
    if (index === 0) return; // 第一个元素已经初始化过，跳过

    // 获取前一个元素
    const previousItem = tableData .value[index - 1];

    // 遍历合并配置，执行相应的合并逻辑
    mergeConfigs.value.forEach((config: any) => {
      const { key, mergeArray, mergeIndex } = config;

      if (item[key] === previousItem[key]) {
       // 当前元素与前一个元素相同，
        if (configIndex === 0) {
          //  第一列直接合并
          mergeArray[mergeIndex] += 1;
          mergeArray.push(0);
        } else if (
          mergeConfigs.value[configIndex - 1].mergeArray[index - 1] == 0 &&
          mergeConfigs.value[configIndex].mergeArray[index - 1] == 0 &&
          mergeConfigs.value[configIndex - 1].mergeArray[index] > 0
        ) {
          // 如果第 N+1 列相同超出第 N 列始一个新的合并单元格
          mergeArray.push(1);
          config.mergeIndex = index;
        } else {
          // 当前元素与前一个元素相同，增加当前合并单元格的计数
          mergeArray[mergeIndex] += 1;
          // 在合并数组中添加一个0，表示这个位置不需要合并
          mergeArray.push(0);
        }
      } else {
        // 当前元素与前一个元素不同，表示需要开始一个新的合并单元格
        mergeArray.push(1);
        // 更新索引为当前元素位置
        config.mergeIndex = index;
      }
    });
  });
};


const objectSpanMethod: any = ({ row, column, rowIndex, columnIndex }: any) => {
  // 合并列的字符串数组
  const tableMergeArr = ["year", "type", "deptCompletionDegree"];

  if (tableMergeArr.includes(column.property)) {
    // 找到合并列对象数组对应下标
    const colIndex = mergeConfigs.value.findIndex(
      (item: any) => item.key === column.property
    );
    return {
      //将需要合并的行数赋值给 _row，注意这里由上一个方法的输出[1,1,2,0]可以知道，
      rowspan: mergeConfigs.value[colIndex].mergeArray[rowIndex],
      //colspan有两种情况要不是0不显示，要不是1显示，根据rowspan（ _row）来确定；
      colspan: mergeConfigs.value[colIndex].mergeArray[rowIndex] > 0 ? 1 : 0,
    };
  }
};

armanted
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
table合并列，一对多的展示。
weixin_43936040的博客
08-18 3642
table合并列的操作 数据类型 [{name: ‘’, accountPos: []}, {}] ,合并的部分是在对象里的。 html部分代码 <template> <div> <div style="width 92%;"> <table class="table-box" style="padding-right:19px"> <thead>
手动进行table的合并列操作
weixin_43936040的博客
03-26 828
手动进行表格的合并列操作 前提：vue的前端框架，加原生的table 需求： 点击表格的尾部的操作新增按钮可以新增并合并行 删除的时候删除行并改变合并的列 最后按json的格式提交表数据给后台 思路： 做一个二维数组，每个数组表示是表格一行，每行里的对象是每一行的td，每个td带一个rowspan或者colspan的属性表示要操作合并的项 然后利用vue做数据驱动操作数据就可以正常的合并了 数据示例 [ [ {val: 1, name: '', rowspan: -1}, {val: 1, na
table合并
木昆灵寒酥的博客
12-11 441
一下表格基于element-ui的table进行举栗子。
el-table表格动态合并行、合并行列及详解_el-table 合并行
最新发布
2401_85124666的博客
06-12 5263
在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下： 而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下： 所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单 是el-table上属性，其值是一个，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下： 首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）
table 列合并
weixin_38822843的博客
12-05 1424
<script> //参数为需要合并的列 merge (icol) { // console.log(icol) var tdTxt = '' var list_map = new Array() var uuid = '' var icolIndex = icol - 1 var that = this $('#table').find('tbody tr').each(function ().
table合并列
wojiaowuyali的博客
03-30 540
import React, { useState, useEffect, useRef } from 'react'; import { Table, Button, Tooltip, Modal, } from 'antd'; const Index = () => { const listData = [{ skuId: '143621', skuName: '无线产品7', storeName: 'pb顺丰仓', options: [{ ta.
table列合并
weixin_46211267的博客
08-20 1249
:span-method="objectSpanMethod" //表格跨列设置 objectSpanMethod({ row, column, rowIndex, columnIndex }) { //表格合并行 if (columnIndex === 0) { const _row = this.spanArr[rowIndex]; const _col = _row > 0 ? 1 : 0; return {
table 表格 行列合并
mengfanyue123的博客
07-21 394
正常table 表格合并都在 随便搜都可以搜一堆代码 但是如果是复杂数据的表格 就比较麻烦。直接上代码 简单案例。
bootstrap table实现横向合并与纵向合并
10-16
Bootstrap Table 是一个基于 Bootstrap 框架的轻量级组件，用于创建响应式的、功能丰富的表格。在实际的网页开发中，我们有时需要对表格中的单元格进行横向或纵向的合并，以展示更加清晰的数据结构。本文将详细介绍...
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
ExtJS 4.2 Grid组件单元格合并的方法
10-21
ExtJS 4.2 Grid组件的单元格合并是一种实现数据展示优化的技术，可以让用户在数据量大且相关数据重复时，通过合并相同数据的单元格来提升界面的整洁性和可读性。在ExtJS 4.2版本中，Grid组件本身并不提供内置的...
bootstrap表格列合并
10-17
在Bootstrap中，表格（Table）组件是用于展示结构化数据的一种方式。在某些情况下，我们可能需要对表格的列进行合并，以便更好地组织信息或者优化视觉效果。本篇文章将详细探讨如何在Bootstrap中实现表格列合并，...
antd vue table跨行合并单元格,并且自定义内容实例
01-18
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
el-table表格列合并
m0_48957210的博客
10-19 2897
el-table的相同列合并
html中table表格的行、列怎么进行合并
naozibuok的博客
05-24 2752
在HTML中，使用 <table> 元素来创建表格，而行（tr）和列（td或th）的合并可以通过和属性来实现。这两个属性允许单个表格单元格（td或th）跨越多个列或行。colspan：用于合并列。它定义了一个表格单元格应该横跨多少列。rowspan：用于合并行。它定义了一个表格单元格应该横跨多少行。
table 表格合并行或列
小贤笔记
09-07 1万+
合并单元格 <table> <tbody> <tr> <th colspan="2">我是占位符</th> <th colspan="2">我是占位符</th> </tr> <tr> ...
el-table表格合并行、合并列
热门推荐
云
06-22 14万+
【代码】el-table表格合并行、合并列。
elementui table组件的合并列功能，合并列后行高变高如何解决
07-11
对于 Element UI 的 Table 组件，合并列后行高变高的问题可以通过自定义单元格的样式来解决。以下是一种可能的解决方案： 1. 在需要合并列的单元格中，使用自定义的样式来控制行高。可以通过设置 `line-height` 属性来调整行高，将其设置为合适的值。 2. 在 Table 组件中，可以使用 `cell-style` 属性来设置单元格的样式。通过这个属性，你可以为每个单元格设置自定义的样式。 下面是一个示例代码，展示如何使用自定义样式来解决合并列后行高变高的问题： ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column prop="mergedCell" label="合并列" :formatter="mergeCellFormatter"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京', mergedCell: '合并列内容' }, { name: '李四', age: 20, address: '上海', mergedCell: '' }, { name: '王五', age: 22, address: '广州', mergedCell: '' }, ], }; }, methods: { mergeCellFormatter(row, column, cellValue, index) { // 判断当前单元格是否需要合并 if (index === 0) { return { rowspan: 3, // 合并列的行数 style: 'line-height: 60px;', // 设置行高 content: cellValue, // 单元格内容 }; } else { return { rowspan: 0, // 不合并列 content: '', // 空内容 }; } }, }, }; </script> ``` 在上述示例中，我们通过 `mergeCellFormatter` 方法来控制合并列的样式和内容。通过设置 `rowspan` 属性来指定合并列的行数，同时设置 `style` 属性来调整行高。 注意：上述示例仅为示意，实际使用时需要根据你的具体需求进行调整和优化。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值