本文共 1395 字，大约阅读时间需要 4 分钟。

View UI 表格行列合并引导

基本使用介绍

View UI（iView）从4.0.0版本开始，新增了行列合并属性，用户可以通过span-method属性进行表格行列合并。该方法允许开发人员定义合并逻辑，易于实现表格单元格的合并功能。

核心方法解析

合并逻辑通过span-method属性定义，提供的回调函数接收四个参数：row、column、rowIndex、columnIndex。具体操作：

示例回调函数定义

handleSpan ({ row, column, rowIndex, columnIndex }) {
  // 合并逻辑定义
}

回调参数说明

• row：当前行对象
• column：当前列对象
• rowIndex：行索引（从0开始）
• columnIndex：列索引（从0开始）

常见操作示例

• 单元格合并：

  return {
    rowspan: 3,
    colspan: 1
  };

  • rowspan：合并的行数
  • colspan：合并的列数

• 不支持合并：

  return {
    rowspan: 0,
    colspan: 0
  };

特性解析

项目实战应用

准备工作

示例场景

假设表格字段包含日期、姓名、年龄、地址，现要求合并同名记录。

数据准备

提供如下数据结构：

{
  data5: [
    { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' },
    { name: 'John Brown', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' },
    { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' },
    { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' }
  ]
}

样例代码

代码分析

• handleSpan回调：

  • 当columnIndex 为1（即第二列）时，合并当前行和下一行。
  • 若为其他列，检查行索引和列索引，判断是否进行合并。

• flexible span logic： 该逻辑可根据实际需求灵活扩展，支持跨行列的合并方式。

运行效果展示

合并后表格展示方式为：

注意事项