antd table 合并相邻相同单元格数据

原创 已于 2024-03-31 19:10:25 修改
· 3.6k 阅读 · 15 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2024-03-31 18:45:27 首次发布

antd 表格行/列合并

定义及使用

表头只支持列合并，使用 column 里的 colSpan 进行设置。

表格支持行/列合并，使用 onCell 里的单元格属性 colSpan 或者 rowSpan 设置。 设置为 0 时，设置的表格不会渲染（所以在设置的时候前面的行/列合并了后面的行/列时，后面的被合并的行/列渲染时需要设为 0）。

1、表头列合并时，在 table 定义 columns 时指定 colSpan 即可，为了显示正常要在被前面合并列的后面的几个 column 中指定 colSpan: 0
在这里插入图片描述

示例代码：

const columns = [
  {
    title: "Home phone",
    colSpan: 2,
    dataIndex: "tel",
  },
  {
    title: "Phone",
    colSpan: 0,
    dataIndex: "phone",
  },
];

上面 Home Phone 列指定 colSpan:2 合并了两列（当前列和后面的 Phone 列），为了显示正常（表头不会多出一列），在 Phone 列中需要指定 colSpan: 0

2、数据行合并，在 onCell 函数中返回一个包含 rowSpan 参数的对象
在这里插入图片描述

示例代码：

{
  title: 'Home phone',
  colSpan: 2,
  dataIndex: 'tel',
  onCell: (_, index) => {
    if (index === 2) {
      return {
        rowSpan: 2,
      };
    }
    // These two are merged into above cell
    if (index === 3) {
      return {
        rowSpan: 0,
      };
    }
    if (index === 4) {
      return {
        colSpan: 0,
      };
    }
    return {};
  },
}

上面代码表示在 Home phone 这一列，第 3 行跨两行即合并第 3、4 为一个单元格。第 4 行由于是被合并所以设置为 0，第五行由于列被合并所以 colSpan 设为 0

3、数据列合并，在 onCell 函数中返回一个包含 colSpan 参数的对象
在这里插入图片描述

示例代码：

{
  title: 'Name',
  dataIndex: 'name',
  render: (text) => <a>{text}</a>,
  onCell: (_, index) => ({
    colSpan: index < 4 ? 1 : 5,
  }),
}

上面代码代表 Name 这一列，在第 5 行前面不跨列，在不小于第 5 行后跨 5 列（包含自身）

相邻数据行合并

思维衍生，根据这个我们可以做一个相同数据单元格合并的功能，具体为：
1、如果多行相邻的行数据，上下相邻的单元格数据相同，就把上下相邻且相同的单元格合并。
2、可以给上面的单元格合并加一个限制条件，例如前面的第一列 id 相同的情况下，且出现上述 1 的相邻相同数据才合并

图例：
在这里插入图片描述

  • 上述我们可以用以 name 相同作为合并的前提条件，合并后面的 Age 列。
  • 以 Age 相同作为合并的前提条件，合并后面的 Home phone 列。
  • 不设置前置条件合并所有上下相邻的且值相同的列：phone。
  • 以 Home phone 相同作为合并的前提条件，合并后面的 Address列。

原理：
onCell 方法在当前列的每个单元格都会执行一次，首先会判断当前单元格是已经被合并。

  • 如果否，需要合并的列执行的时候记录当前单元格的值，从前往后遍历表格数据（tableData），遇到相同列（上下相邻行），并且相同数据的行，就记录并把合并行的计数+1，直到遇到不同的值就返回需要合并的行总数(如{rowSpan: 2})。
  • 如果是，后面已经被合并的单元格执行 onCell 方法时，会去rowSpanRecord查看自己是否被合并了，合并了就返回不渲染当前单元格(即返回 {rowSpan:0})

示例代码：

/* 
rowSpanRecord 数据结构
rowSpanRecord = {
  name: {
    'John Browne': {
      rowIndexs: [0]
    },
    'Jim Green': {
      rowIndexs: [1,2]
    },
    'Joe Black': {
      rowIndexs: [3]
    },
    'Jim Red': {
      rowIndexs: [4]
    },
    'Jake White': {
      rowIndexs: [5]
    },
  },
  age: {
    32: {
      rowIndexs: [0,1,2]
    },
    42: {
      rowIndexs: [3]
    },
    16: {
      rowIndexs: [4,5]
    },
  },
  ...
}
*/
let rowSpanRecord = {
  age: {},
  tel: {}
};
columns = [
  {
    title: "Age",
    dataIndex: "age",
    // 无前置合并条件的，相同行直接合并
    onCell: (record, rowIndex) => {
      if (rowSpanRecord["age"][record.age]?.rowIndexs.includes(rowIndex)) {
        return { rowSpan: 0 };
      }
      let rowSpan = 0;
      for (let i = rowIndex; i < data.length; i++) {
        if (record.age === data[i].age) {
          rowSpan++;
          if (rowSpanRecord["age"][record.age]) {
            rowSpanRecord["age"][record.age].records.push(data[i]);
            rowSpanRecord["age"][record.age].rowIndexs.push(i);
          } else {
            rowSpanRecord["age"][record.age] = {
              records: [data[i]],
              rowIndexs: [i]
            };
          }
        } else {
          break;
        }
      }
      return { rowSpan };
    }
  },
  {
    title: "Home phone",
    dataIndex: "tel",
    // 以age相同为合并条件
    onCell: (record, rowIndex) => {
      if (rowSpanRecord["tel"][record.tel]?.rowIndexs.includes(rowIndex)) {
        return { rowSpan: 0 };
      }
      let rowSpan = 0;
      for (let i = rowIndex; i < data.length; i++) {
        if (record.age === data[i].age && record.tel === data[i].tel) {
          rowSpan++;
          if (rowSpanRecord["tel"][record.tel]) {
            rowSpanRecord["tel"][record.tel].records.push(data[i]);
            rowSpanRecord["tel"][record.tel].rowIndexs.push(i);
          } else {
            rowSpanRecord["tel"][record.tel] = {
              records: [data[i]],
              rowIndexs: [i]
            };
          }
        } else {
          break;
        }
      }
      return { rowSpan };
    }
  }
]

将 onCell 合并中合并单元格的方法进行抽象封装，核心代码：

/**
 * 合并目标列中相同值的行
 * @param record antd 提供的当前行数据
 * @param rowIndex antd 提供的当前行的序号
 * @param data 当前table的数据列表 tableData
 * @param curProp 当前需要合并行的列的属性值
 * @param sameKey 可选， 当前要合并行的列的前置条件，就是前面必须那个属性值必须相同才判断当前列相同合并
 * @returns {rowSpan: num}, 返回一个包含要合并的行数的对象
 */
const mergeRows = ({
  record = {},
  rowIndex = 0,
  data = [],
  curProp = "",
  sameKey = undefined
} = {}) => {
  /* 前面行已经进行了判断并合并，前面的行合并了后面的行之后，（该判断是后续行的判断）
  后面的行不能再显示了否则table会变形，所以这里需要将后续的列中返回 {rowSpan:0} */
  if (rowSpanRecord[curProp][record[curProp]]?.rowIndexs.includes(rowIndex)) {
    return { rowSpan: 0 };
  }
  let rowSpan = 0;
  for (let i = rowIndex; i < data.length; i++) {
    // 有 sameKey，需要判断前置条件列中的值必须相同
    if (sameKey) {
      if (
        record[sameKey] === data[i][sameKey] &&
        record[curProp] === data[i][curProp]
      ) {
        rowSpan++;
        // 将列中行的值记录
        if (rowSpanRecord[curProp][record[curProp]]) {
          rowSpanRecord[curProp][record[curProp]].rowIndexs.push(i);
        } else {
          rowSpanRecord[curProp][record[curProp]] = {
            rowIndexs: [i]
          };
        }
      } else {
        break;
      }
    } else {
      // 没有前置列，只需要判断当前列相邻列是否相同
      if (record[curProp] === data[i][curProp]) {
        rowSpan++;
        // 将列中行的值记录
        if (rowSpanRecord[curProp][record[curProp]]) {
          rowSpanRecord[curProp][record[curProp]].rowIndexs.push(i);
        } else {
          rowSpanRecord[curProp][record[curProp]] = {
            rowIndexs: [i]
          };
        }
      } else {
        break;
      }
    }
  }
  return { rowSpan };
};

补充

antd4 中使用时发现每次刷新后会有 bug，导致合并行全都不见了，原因：antd 在浏览器刷新的时候或者说在第一次渲染时 onCell 回调函数会调用两次，所以需要对后面每次重新调用进行一个数据重置。

另外在使用的时候 rowSpanRecord 合并行数据记录对象和 mergeRows 方法都可以放到组件外面

// 当前行数据，当前列的值
const recordCurPropValue = record[curProp];
// 判断是否是重复渲染（antd刷新或者第一次渲染会触发两次onCell回调）,是 则重置数据
if (
  rowIndex === 0 &&
  rowSpanRecord[curProp][recordCurPropValue]?.rowIndexs?.length > 0
) {
  for (const key of Object.keys(rowSpanRecord)) {
    rowSpanRecord[key] = {};
  }
}

完整代码：

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
import type { ColumnsType } from "antd/es/table";

interface DataType {
  key: string;
  name: string;
  age: number;
  tel: string;
  phone: number;
  address: string;
}

const data: DataType[] = [
  {
    key: "1",
    name: "John Browne",
    age: 32,
    tel: "0571-22098909",
    phone: 18889898989,
    address: "New York "
  },
  {
    key: "2",
    name: "Jim Green",
    tel: "0571-22098333",
    phone: 18889898989,
    age: 32,
    address: "London No. "
  },
  {
    key: "20",
    name: "Jim Green",
    tel: "0571-22098333",
    phone: 18889898989,
    age: 32,
    address: "London No. "
  },
  {
    key: "3",
    name: "Joe Black",
    age: 42,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Sidney No."
  },
  {
    key: "4",
    name: "Jim Red",
    age: 16,
    tel: "0575-220989091",
    phone: 18900010002,
    address: "Sidney No."
  },
  {
    key: "5",
    name: "Jake White",
    age: 16,
    tel: "0575-220989091",
    phone: 18900010002,
    address: "Sidney No."
  }
];

/*  需要进行行合并的列的属性值对象，主要为了记录每次合并时的行, rowIndexs 为记录的相同值的行号
结构： rowSpanRecord: {age: {rowIndexs: [0,1,2,3]}} */
let rowSpanRecord = {
  age: {},
  tel: {},
  phone: {},
  address: {}
};

/**
 * 合并目标列中相同值的行
 * @param record antd 提供的当前行数据
 * @param rowIndex antd 提供的当前行的序号
 * @param data 当前table的数据列表 tableData
 * @param curProp 当前需要合并行的列的属性值
 * @param sameKey 可选， 当前要合并行的列的前置条件，就是前面必须那个属性值必须相同才判断当前列相同合并
 * @returns {rowSpan: num}, 返回一个包含要合并的行数的对象
 */
const mergeRows = ({
  record = {},
  rowIndex = 0,
  data = [],
  curProp = "",
  sameKey = undefined,
} = {}) => {
  // 当前行数据，当前列的值
  const recordCurPropValue = record[curProp];
  // 判断是否是重复渲染（antd刷新或者第一次渲染会触发两次onCell回调）
  if (
    rowIndex === 0 &&
    rowSpanRecord[curProp][recordCurPropValue]?.rowIndexs?.length > 0
  ) {
    for (const key of Object.keys(rowSpanRecord)) {
      rowSpanRecord[key] = {};
    }
  }
  // 记录中，当前要合并的列的prop,下面值的集合
  const rowSpanRecordCurPorp = rowSpanRecord[curProp];

  /**
       * 前面行已经进行了判断并合并，前面的行合并了后面的行之后，（该判断是后续行的判断）
      后面的行不能再显示了否则table会变形，所以这里需要将后续的列中返回 {rowSpan:0}
       */
  const curPropIndexs = rowSpanRecordCurPorp[recordCurPropValue]?.rowIndexs;
  if (curPropIndexs?.includes(rowIndex)) {
    return { rowSpan: 0 };
  }
  let rowSpan = 0;
  for (let i = rowIndex; i < data.length; i++) {
    // 有 sameKey，需要判断前置条件列中的值必须相同
    if (sameKey) {
      if (
        record[sameKey] === data[i][sameKey] &&
        recordCurPropValue === data[i][curProp]
      ) {
        rowSpan += 1;
        // 将列中行的值记录
        if (rowSpanRecordCurPorp[recordCurPropValue]) {
          rowSpanRecordCurPorp[recordCurPropValue].rowIndexs.push(i);
        } else {
          rowSpanRecordCurPorp[recordCurPropValue] = {
            rowIndexs: [i],
          };
        }
      } else {
        break;
      }
    } else {
      // 没有前置列，只需要判断当前列相邻列是否相同
      if (recordCurPropValue === data[i][curProp]) {
        rowSpan += 1;
        // 将列中行的值记录
        if (rowSpanRecordCurPorp[recordCurPropValue]) {
          rowSpanRecordCurPorp[recordCurPropValue].rowIndexs.push(i);
        } else {
          rowSpanRecordCurPorp[recordCurPropValue] = {
            rowIndexs: [i],
          };
        }
      } else {
        break;
      }
    }
  }
  return { rowSpan };
};

const columns: ColumnsType<DataType> = [
  {
    title: "Name",
    dataIndex: "name",
    render: (text) => <a>{text}</a>
  },
  {
    title: "Age",
    dataIndex: "age",
    onCell: (record, rowIndex) => {
      // 这是第一个指明相同的合并的列，前面的列可以没有合并，比如name
      return mergeRows({
        record,
        rowIndex,
        data,
        curProp: "age",
        sameKey: "name"
      });
    }
  },
  {
    title: "Home phone",
    dataIndex: "tel",
    onCell: (record, rowIndex) => {
      // 指明前置条件 age 必须相同，只有当age相同时，当前列有相邻相同行值才会合并
      return mergeRows({
        record,
        rowIndex,
        data,
        curProp: "tel",
        sameKey: "age"
      });
    }
  },
  {
    title: "Phone",
    dataIndex: "phone",
    onCell: (record, rowIndex) => {
      // 没有加第四个参数 age，没有前置条件所以会合并当前列相同项
      return mergeRows({ record, rowIndex, data, curProp: "phone" });
    }
  },
  {
    title: "Address",
    dataIndex: "address",
    onCell: (record, rowIndex) => {
      // 不管前面的age，现在以Home Phone必须相同，也能生效
      return mergeRows({
        record,
        rowIndex,
        data,
        curProp: "address",
        sameKey: "tel"
      });
    }
  }
];

const App: React.FC = () => (
  <Table columns={columns} dataSource={data} bordered />
);

export default App;

如果想对第一列的 Name 相同值也做合并，需要在并且在 name 列加上 onCell，并且 rowSpanRecord 对象中需要加上 name 属性

{
  title: "Name",
  dataIndex: "name",
  onCell: (record, rowIndex) => {
    // 没有前置条件所以会合并当前列相同项
    return mergeRows({ record, rowIndex, data, curProp: "name" });
  }
}

图例：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
我们调用这个方法还得写一个全局变量，不能直接通过引用的方式，将上面的 rowSpanRecord 封装进 mergeRows 方法里面，就可以让他以工具方法的形式进行引用调用了，封装代码：

/**
 * 合并目标列中相同值的行
 * @param record antd 提供的当前行数据
 * @param rowIndex antd 提供的当前行的序号
 * @param data 当前table的数据列表 tableData
 * @param curProp 当前需要合并行的列的属性值
 * @param sameKey 可选， 当前要合并行的列的前置条件，就是前面必须那个属性值必须相同才判断当前列相同合并
 * @returns {rowSpan: num}, 返回一个包含要合并的行数的对象
 */
const mergeRows = () => {
  // 合并行的数据记录
  let rowSpanRecord = {};
  return ({
    record = {},
    rowIndex = 0,
    data = [],
    curProp = "",
    sameKey = undefined,
  } = {}) => {
    // 往rowSpanRecord中添加数据
    if (!rowSpanRecord[sameKey] && sameKey) {
      rowSpanRecord[sameKey] = {};
    }
    // 往rowSpanRecord中添加数据
    if (!rowSpanRecord[curProp]) {
      rowSpanRecord[curProp] = {};
    }
    // console.log(rowSpanRecord, 'sdf', curProp, !!sameKey)
    // 当前行数据，当前列的值
    const recordCurPropValue = record[curProp];
    // 判断是否是重复渲染（antd刷新或者第一次渲染会触发两次onCell回调）
    if (
      rowIndex === 0 &&
      rowSpanRecord[curProp][recordCurPropValue]?.rowIndexs?.length > 0
    ) {
      for (const key of Object.keys(rowSpanRecord)) {
        rowSpanRecord[key] = {};
      }
    }
    // 记录中，当前要合并的列的prop,下面值的集合
    const rowSpanRecordCurPorp = rowSpanRecord[curProp];

    /**
       * 前面行已经进行了判断并合并，前面的行合并了后面的行之后，（该判断是后续行的判断）
      后面的行不能再显示了否则table会变形，所以这里需要将后续的列中返回 {rowSpan:0}
       */
    const curPropIndexs = rowSpanRecordCurPorp[recordCurPropValue]?.rowIndexs;
    if (curPropIndexs?.includes(rowIndex)) {
      return { rowSpan: 0 };
    }
    let rowSpan = 0;
    for (let i = rowIndex; i < data.length; i++) {
      // 有 sameKey，需要判断前置条件列中的值必须相同
      if (sameKey) {
        if (
          record[sameKey] === data[i][sameKey] &&
          recordCurPropValue === data[i][curProp]
        ) {
          rowSpan += 1;
          // 将列中行的值记录
          if (rowSpanRecordCurPorp[recordCurPropValue]) {
            rowSpanRecordCurPorp[recordCurPropValue].rowIndexs.push(i);
          } else {
            rowSpanRecordCurPorp[recordCurPropValue] = {
              rowIndexs: [i],
            };
          }
        } else {
          break;
        }
      } else {
        // 没有前置列，只需要判断当前列相邻列是否相同
        if (recordCurPropValue === data[i][curProp]) {
          rowSpan += 1;
          // 将列中行的值记录
          if (rowSpanRecordCurPorp[recordCurPropValue]) {
            rowSpanRecordCurPorp[recordCurPropValue].rowIndexs.push(i);
          } else {
            rowSpanRecordCurPorp[recordCurPropValue] = {
              rowIndexs: [i],
            };
          }
        } else {
          break;
        }
      }
    }
    return { rowSpan };
  };
};

调用方式：

// 合并行函数，在组件外面调用就行
const mergeTableRow = mergeRows()

// 组件内部的columns选项对象
{
  title: "Name",
  dataIndex: "name",
  onCell: (record, rowIndex) => {
    // 没有前置条件所以会合并当前列相同项
    return mergeTableRow({ record, rowIndex, data, curProp: "name" });
  }
}
墨语轩
关注
antdv内a-table单元格合并方案总结
cabinx的博客
02-15 2127
antdv内a-table单元格合并方案总结 1.需求背景 最近在vue+antdv项目中需要对表格进行单元格合并处理展示： 解决方案 在a-table中设置属性:columns="columns"，列表数据tableData需要是一个相同的数据排列在一起的数组，rowSpan（合并行数）colSpan（合并列数） // 1.在columns中对要设置单元格合并的列设置customRender（单元格合并的参数在attrs属性内）： columns: [ {
Ant Design Vue实现a-table表格单元格合并
qq_42605684的博客
06-01 2501
Ant Design Vue实现a-table表格单元格合并 参考Ant design Vue官网关于行和列合并api https://antdv.com/components/table-cn/ 下面官网对表格合并这块的描述 ！！！注意注意注意重要事情说三遍：很多同学都习惯性的将columns写在data外，如果使用表格合并，会报错，提示缺少‘h’，定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 <template> <a-tab
table自动合并相同值得单元格的例子
10-26
一个简单的自动合并相同值单元格的例子，简单易懂
Antd Table 分页条件下的动态数据合并单元格
是谢添啊
10-14 1843
本文介绍 Ant Design Vue 的 a-table 表格组件如何在分页条件下的对动态数据合并单元格。我们希望进行行合并，即将相同日期和相同店铺列的行单元格分别进行行合并。由于数据量可能会很大，因此需要进行分页处理。**在分页情况下，我们进行的行合并其实只需要考虑这一页的记录即可，也就是将这一页的所有记录中相同日期和相同店铺列的行单元格分别进行行合并。**
antd Table 动态数据 合并单元格（合并行）
热门推荐
芝芝为荔枝
01-06 1万+
最近处理table的时候 遇到了要合并同一列的几行的情况，比如第一列的前面三行都是同一个对象的名字，此时合并显示比较妥当，但是数据是后端接口来的，而且可以筛选条件，搜索出来的数据就是动态的长度，可能这次需要合并前面的五行， 在原有的静态数据的合并的基础上，需要加上一个合并的逻辑代码。，遇到需要合并的行，设置rowSpan的数量为需要合并的行总数，然后把后面的rowSpan设置为0（不渲染该位置），否则这个表格就会乱套。下面就是我们合并了 ‘分类’ 列下面的 【1,2】行 ，【4,5,6】 行。
ant-design表格自动合并相同内容的单元格
chendf__的博客
09-18 409
表格自动合并相同内容的单元格
antd-Table合并单元格
zhf_123666的博客
08-05 353
https://www.cnblogs.com/liumcb/p/13042586.html ----------------------------------js-------------------------------------------- exportfunctionmergeCells(dataSource,type){ constobjResult={}; constarr=[];//将数组重合成3个数组 constarr1=[];//每个数...
antd 合并单元格
weixin_44320857的博客
09-10 235
data中定义的列数据 columns3: [ { title: 'Department', dataIndex: 'department', width: '7%', align: 'center', customRender: (value, row, index) => { const obj = { children: value,
antd 中 Table表格合并
qq_33472885的博客
08-16 5046
1.先获取所要合并的列中的rowkey 2.当值在多个页面出现时重新记录rowSpan 3.合并相同的列 const defectSpan = [{ spanName: '小明', defect: '', oid: '1', }, ...15个一样de // oid不一样 { spanName: '小明小明', defect: '', ...
Vue3+antd：表格中合并多行相同数据
Xue_BT的博客
04-19 560
首先获取远程数据，获取完成之后对数据进行遍历。：本次以合并相同ID为示例。
antd vue table跨行合并单元格,并且自定义内容实例
01-18
ant-design-vue版本：~1.3.8 需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex:
Ant design of vue (表格相同数据动态合并) 出坑代码！
weixin_45796807的博客
12-20 5142
蚂蚁金服的design Vue表格 动态合并代码详情! 你好！我们本次合并表格是实现的列 合并 rowSpan 在上代码 之前 我们先讲一下表格 Ui框架： 1、Vue 2、Ant design Vue 表格： 1、行是 colSpan 2、列是 rowSpan design 表格的title 是不计算 索引的 ！ 我们开始贴图上代码，全部代码在文章末尾！ 完成效果： 举例：我们以红框选中列做相同数据合并 1、Vue 展示 Ant table 代码 2、展示 data 数据 3、vue 导出代码
阿里ant组件库 a-table表格合并单元格
weixin_43056561的博客
06-22 2188
第一次接触阿里ant ui组件库,遇到需要合并单元格的需求,就去网上找了一个判断的方法,记录一下 这个是Vue项目里用到的 在js中声明 function getRowSpanCount(data, key, target) { if (!Array.isArray(data)) return 1; data = data.map(_ => _[key]); // 只取出筛选项 let preValue = data[0]; const res = [[preValue]]; // 放
Antd-Vue中Table组件实现相同内容列合并
returndbf的博客
02-02 1027
方法适用于Antd以及Antd-Vue，可能同样适用于ElementUi
AntD表单Table单元格合并、样式处理
莉兹Liz的博客
03-04 5541
Table表单处理 1、改变Table表单内表头颜色、粗细 2、改变表体颜色 3、合并横行、竖行单元格 4、金额处理，大于0显示红色，小于0显示绿色 5、改变合计行背景色 代码 /** * Table表单样式处理 */ import React, { Component } from 'react'; import { Table } from 'antd'; import './index.css'; import * as util from '../../assets/js/utils.js';
antd中table实现动态单元格合并
weixin_46103180的博客
03-23 1326
最近项目使用的antd中的table，需求中也有需要对表格进行合并，在这之前发不过去elementUi的table合并单元格，其实大致思路是差不多的，只是稍微有些区别，话不多说直接上代码教大家!其实原理就是取第一行数据为基准，与他的下一行数据进行对比，相同则合并数加1，不相同则合并数就默认为1。红色部分是我合并的区域。
react使用antd组件合并Table单元格
wx258852的博客
12-06 1282
初始化合并单元格，必须对应projectnameRowSpan行名称重新组合方法。行数据可编辑方法，总数据编辑。
含合并行列的antd-table
plz_Yif的博客
09-11 450
有些excel设计时会有重复的行列内容需要合并单元格，这里提供一个解决思路。
vue-antdesign——实现table单元格合并+换行展示+滚动到指定位置+行样式设置——技能提升
yehaocheng520的博客
06-21 7967
vue-antdesign——实现table单元格合并+换行展示+滚动到指定位置+行样式设置——技能提升
antd Table 动态数据 合并单元格（合并列）
最新发布
11-05
合并单元格在表格中用于显示复杂的数据结构，例如当某一列需要跨多个行展示信息时，可以将相关的单元格合并起来。 要实现动态数据下的合并单元格，你需要按照以下步骤操作： 1. 使用 `proColumns` 属性：这个属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值