在前后台管理系统里表格数据合并是个很常见又容易被低估的需求。我最早接触 NaiveUI 的 rowSpan 时以为就是一个简单的属性真正上手做报表才发现里面藏着不少细节。这篇文章就把 rowSpan 从概念、配置到实战、踩坑完整讲透尤其是处理“按相同字段自动合并”这种高频场景非常适合正在做数据表格、报表模块、管理后台的同学参考。1. rowSpan 的使用场景与表格合并机制1.1 从需求出发为什么报表里缺不了跨行合并先抛一个很典型的场景销售报表里同一个“分类”下面有多条商品记录比如“数码”下有手机、耳机、充电器每行都要显示分类名称。如果每一行都写上“数码”表格会显得特别重复也不利于视觉分组。产品经理大概率会要求你做成这样分类列只在第一行出现下面的几行合并成一个整块居中展示。这本质就是跨行合并。类似的需求还有课程表里同一个教室跨节次合并、订单明细里同一个订单号跨多行合并、项目排期表格里部门跨周合并。它们都有一个共同点某列的值在多行内是相同或连续的需要把连续区域的首行单元格纵向拉通隐藏后续行里该单元格的独立呈现。在原生 HTML 表格里直接对td设置rowspan属性就能实现。但在 NaiveUI 的DataTable组件里表格是数据驱动的我们不能手动去操作 DOM而是要在列配置里告诉组件这个列什么时候需要合并、合并多少行。1.2 NaiveUI 表格中的 rowSpan / colSpan 是怎么工作的NaiveUI 的DataTable列配置对象里提供了rowSpan和colSpan两个属性。很多初学的人误以为这是写在n-data-table标签上的实际上它是columns数组里某个列的配置项。以rowSpan为例在某个列的配置中写{ title: 分类, key: category, rowSpan: (rowData) rowData.categorySpan }当这一列的rowSpan函数返回一个大于 1 的数字 N 时代表当前单元格向下跨越 N 行。与此同时被跨掉的后续行里这一列的位置会被“占住”不再重复渲染内容。关键点来了rowSpan的值不是 NaiveUI 自动帮你按内容算出来的你必须自己计算好每个数据行该返回多少尤其是后续行要返回 0表示“这一行的这一列不显示了”这样才能形成从第一个单元格往下合并一整块的效果。colSpan的工作原理类似只是方向从纵向变成横向用于跨列合并表头或者多列单元格。两者可以组合使用但组合时要特别注意边界条件这一点后面我会专门讲。1.3 rowSpan 返回值“0 / 1 / N”分别是什么含义我见过不少同学在rowSpan函数里返回true、返回字符串2结果完全不生效。这里先统一概念rowSpan的返回值必须是数字。返回值含义典型使用场景0当前行的该单元格被隐藏不参与展示作为合并区域内非第一行的标记1不发生合并正常显示一个单元格默认状态的写法NN 1当前单元格向下合并 N 行一组连续相同数据的首行也就是说一个完整的合并组里第一行的rowSpan要等于组内行数后续每行的rowSpan要等于 0。这也是最常见的数据预处理思路。2. 配置 rowSpan 的两种方式与踩坑点2.1 静态写法列配置里直接写死 rowSpan如果你要合并的行数相对固定或者不需要根据数据计算可以直接把rowSpan写成一个常量数字。{ title: 备注, key: remark, rowSpan: 2 }这种写法意味着表格每一行的“备注”列都会向下合并 2 行。但说实话实际业务中这种完全固定的合并非常少见。它更适合用在表头或者某些特殊固定结构里比如第一列始终每两行合并一次。更多情况下我们还是需要让组件根据每一行的数据动态计算合并数。2.2 动态写法通过函数按当前行数据返回更通用的方式是让rowSpan成为一个函数函数签名大概长这样rowSpan: (rowData, rowIndex) { // rowData 是当前行的数据对象 // rowIndex 是当前行在 data 数组中的索引 return rowData.span ?? 1 }函数的作用很直接组件渲染某一行的这一列时去问你“这里要合并吗合并几行”你根据rowData里的某个字段返回数字即可。为了让数据清洗和视图逻辑分离我习惯先对原始数据做一次预处理在数据里标记出每个合并组的首行和尾行然后列配置里只做一层“取值转发”。{ title: 分类, key: category, rowSpan: (rowData) rowData.categorySpan ?? 1 }这样columns配置非常稳定将来数据变化时只需要重新跑一下预处理函数不需要动列结构。2.3 写 rowSpan 函数时最容易忽略的三个细节第一个细节一定要给后续行也设置span 0哪怕它们的数据里仍然有 category 字段。如果不设置 0你可能会看到合并列里重复出现文字或者出现错位因为组件认为每一行都该正常显示这个单元格。第二个细节rowSpan函数里返回的值一旦大于当前行到末尾的剩余行数组件不会报错但实际合并效果会变得不可控。比如后面只有 2 行数据你却返回了 5表现就可能异常。所以预处理时合并组不能跨越数组尾部。第三个细节如果你同时用rowIndex做了逻辑判断请务必确认rowIndex是当前渲染数据里的一维索引而不是全局数据集的索引。尤其是在分页、排序之后rowIndex会基于当前页的数据重新编号。把rowIndex和绝对数据的下标混用是排查合并错位时最让人头疼的原因之一。3. 实战按照重复字段自动合并跨行单元格3.1 数据准备与期望效果我现在模拟一个商品销量表原始数据是这样的const rawData [ { id: 1, category: 数码, product: 手机, amount: 3200 }, { id: 2, category: 数码, product: 耳机, amount: 800 }, { id: 3, category: 数码, product: 充电器, amount: 120 }, { id: 4, category: 家电, product: 冰箱, amount: 2600 }, { id: 5, category: 家电, product: 洗衣机, amount: 1900 }, { id: 6, category: 家居, product: 沙发, amount: 4300 } ]期望的效果是分类列中“数码”占 3 行“家电”占 2 行“家居”占 1 行每一个分类的值只显示在对应合并区域的第一行并且垂直居中。要做到这一点核心是先把数据中相同且相邻的category归成组然后给组内首行设置categorySpan 组内行数组内其他行设置categorySpan 0。3.2 写一个预处理函数给数据打上行 span 标记这里有一个隐藏背景默认情况下category相同但不相邻的行不应该被合并。比如两条“数码”中间夹了一条“家电”如果强行把首尾两条“数码”并在一起会跨过其他数据这在表格合并里是错误行为。所以正确处理方式是“连续值分组”而不是“全局相同值分组”。下面这个markRowSpan函数只处理“相邻相同项”的分组是基础但足够稳的方案function markRowSpan(data, field, spanField) { const result data.map((item) ({ ...item })) let i 0 while (i result.length) { let j i 1 while (j result.length result[j][field] result[i][field]) { j } const count j - i result[i][spanField] count for (let k i 1; k j; k) { result[k][spanField] 0 } i j } return result }调用方式很简单const tableData markRowSpan(rawData, category, categorySpan)如果原始数据的字段顺序和你想分组的不一致建议先排序再调用或者在预处理前做一次排序。不然相邻判断会得到和你预期完全不同的分组。如果同一张表里有多个列需要合并可以继续扩展这个函数传入多个字段和多个 span 字段。比如function markRowSpans(data, configs) { // configs: [{ fromField: category, toField: categorySpan }, ...] // 逐个调用 markRowSpan }不过要注意多个列同时合并时如果它们的合并边界不重合表格渲染会非常复杂。真实项目中遇到多列各自独立分组的情况我一般建议拆分表格或者先交互确认需求不要一股脑全塞给表格去硬撑。3.3 在 columns 中接入 rowSpan并处理居中展示预处理完成后columns配置就很简单了const columns [ { title: 分类, key: category, rowSpan: (rowData) rowData.categorySpan, render(rowData) { return h(div, { style: display: flex; align-items: center; justify-content: center; height: 100%; }, rowData.category) } }, { title: 商品, key: product }, { title: 销量, key: amount } ]这里用render包一层 div 是为了让合并后的文字视觉上居中。如果不包默认的位置通常在单元格顶部合并区域一大片时文字会显得很靠上观感不好。3.4 完整代码与运行效果说明完整组件代码长这样template n-data-table :columnscolumns :datatableData :borderedtrue / /template script setup import { h } from vue import { NDataTable } from naive-ui const rawData [ { id: 1, category: 数码, product: 手机, amount: 3200 }, { id: 2, category: 数码, product: 耳机, amount: 800 }, { id: 3, category: 数码, product: 充电器, amount: 120 }, { id: 4, category: 家电, product: 冰箱, amount: 2600 }, { id: 5, category: 家电, product: 洗衣机, amount: 1900 }, { id: 6, category: 家居, product: 沙发, amount: 4300 } ] function markRowSpan(data, field, spanField) { const result data.map((item) ({ ...item })) let i 0 while (i result.length) { let j i 1 while (j result.length result[j][field] result[i][field]) { j } const count j - i result[i][spanField] count for (let k i 1; k j; k) { result[k][spanField] 0 } i j } return result } const tableData markRowSpan(rawData, category, categorySpan) const columns [ { title: 分类, key: category, rowSpan: (rowData) rowData.categorySpan, render(rowData) { return h( div, { style: display: flex; align-items: center; justify-content: center; height: 100%; }, rowData.category ) } }, { title: 商品, key: product }, { title: 销量, key: amount } ] /script运行之后分类列会正确显示三块合并区域“数码”跨 3 行、“家电”跨 2 行、“家居”跨 1 行。其他列保持原有布局不受影响。4. rowSpan 疑难杂症排查与解决方案4.1 rowSpan 明明配置了却不生效先检查这几个点遇到 rowSpan 没生效先不要怀疑组件有 bug按顺序自查第一检查rowSpan是不是写在了列配置对象里而不是表格组件标签上。我把这个错误见过不只一次。第二检查函数返回值类型。一定要是数字2和2看似差不多但组件内部不一定做隐式转换。返回undefined时会当做 1 处理看起来就像没合并一样。第三检查当前列是否同时设置了renderrender 返回的内容如果是一个原生td结构可能会覆盖掉合并逻辑。普通场景下render只负责内部内容不要返回整个 td。第四确认数据连续。如果一组相同值中间夹了其他值那么这一组不会自动跨越中间行合并。除非你的预处理函数有意合并不相邻分组否则这不是 bug是数据结构问题。4.2 合并后单元格错位、多合并或漏合并错位是最常见的现象之一。我遇到过一种典型情况数据里有两个字段都是数字其中一个在提取时因为map操作变成了字符串而另一个是数字导致判断失效本应连续的分组被切开表格出现“多合并”或“漏合并”。解决这个问题的思路是把markRowSpan这类纯函数单独抽出来统一做字段归一化。调试的时候先在控制台打印预处理结果确认每个categorySpan是否符合预期再去看表格渲染效果。如果只有部分列错位另一个怀疑点是多个列同时配置了 rowSpan 且合并组边界交叉。比如 A 列按分类合并B 列按品牌合并分类和品牌的层级不一致合并边界相交叉表格很难渲染正确。遇到这种需求先调整数据模型把交叉结构拍平。4.3 固定列、排序、筛选、分页和 rowSpan 的冲突先说固定列。理论上fixed: left可以和rowSpan同时配置但在实际项目中我发现固定列本身会生成一层额外的表格结构合并单元格的尺寸计算偶尔会出偏差。如果你遇到固定列下合并区域高度不对、出现空白或者遮挡建议把要合并的列放在非固定区域或者给固定列单独做样式补偿。排序对 rowSpan 的影响更直接。NaiveUI 的本地排序会改变数据顺序但数据里已经算好的categorySpan不会跟着变。也就是说排序前“数码”跨 2 行排序后这 2 行被拆散了表格还按旧的 span 值去合并必然出错。解决方案有两个不使用本地排序排序逻辑放到后端接口接口返回新的数据后再重跑markRowSpan。如果坚持用本地排序监听update:sorter事件在排序回调里拿到排序后的数据重新执行预处理。template n-data-table :columnscolumns :datatableData row-keyid update:sorterhandleSorter / /templatefunction handleSorter(sorter) { // 假设 sortedData 是根据 sorter 对 rawData 排序后的新数组 tableData.value markRowSpan(sortedData, category, categorySpan) }筛选的原理也类似筛选后的数据如果是新数组同样要重新计算 span。有一种省心但需要注意的做法是把排序和筛选后的数据再做一次 findIndex 映射但这本质上还是要保证 span 字段和当前渲染数据同步。分页的问题更麻烦。跨页合并天然不可行因为不同页面的数据是独立渲染的。如果某个合并组跨了页第一页的最后一条和第二页的第一条其实是同一组但表格分页后无法感知这一点。结果可能是第一页正确显示了一个跨到本页末尾的合并区域第二页对应位置却因为 span 是 0 而显示空白用户看到数据缺失。处理方式通常有两种让后端在分页时按页返回已计算好的 span保证当前页内的每组数据正确。在前端分页场景下合并组只允许上页尾部断开不跨页合并。也就是说分页后的每一页需要独立预处理而不是拿全量数据算一次再切片。function computePageData(allData, page, pageSize) { const pageData allData.slice((page - 1) * pageSize, page * pageSize) return markRowSpan(pageData, category, categorySpan) }这种按页预处理的写法虽然可能让某个合并组在上一页是完整的、下一页第一行又重新开始但至少每一页显示都不会出现空白或错位。产品上如果无法接受那就改用服务端分页方案。4.4 行选择、展开行与合并单元格如何共存如果表格同时使用type: selection的行选择列会出现一个现象选择列是独立于数据列的每一行都有 checkbox合并过的数据行也被视为普通行可以单独勾选。这个行为本身不算 bug但从交互上看一个被合并成单一“分类”的区域内用户可能以为只会选中一条数据实际却能选中多行。如果你希望合并组内的行在选择时只算一条要么在拿到选择结果后按合并组过滤要么在 rowSpan 计算时把合并组作为一个整体记录提交时统一处理。展开行也类似。展开行功能会给每一行增加一个额外的展开按钮列它和 rowSpan 没有直接冲突但如果你展开的内容高度不固定会让合并单元格的高度估算出问题。建议合并和展开行不要放在同一个表格里除非你已经对动态高度做了充分测试。5. 扩展玩法colSpan、复杂表头与样式微调5.1 跨行与跨列组合的实现思路除了纵向的rowSpanNaiveUI 还支持横向的colSpan。比如某个单元格需要横跨两列就可以在列配置里写{ title: 合计, key: total, colSpan: (rowData) rowData.colSpanValue }实际业务里跨列合并通常出现在统计表格的“合计”行表格前面的几列都是空单元格最后一列横跨多个单元格显示汇总内容。这种结构用原生 HTML 不难但在 NaiveUI 数据表格里需要精细计算每一列的 span。跨行和跨列组合时比如某个汇总行既跨多行又跨多列强烈建议先把合并模型画出来标注出每个单元格的rowSpan和colSpan再写预处理逻辑。否则在表格渲染阶段发现问题排查成本会很高。5.2 合并单元格文本垂直居中的 CSS 技巧合并之后单元格里的文字位置往往不是最理想的。最直接的办法是给这个列配置render在内容外层包一个 flex 容器render(rowData) { return h( div, { style: { display: flex, alignItems: center, justifyContent: center, minHeight: 36px, height: 100% } }, rowData.category ) }如果希望应用到所有单元格可以通过td-style设置{ tdStyle: text-align: center; vertical-align: middle; }但要留意td-style会影响该列所有 td如果只有合并单元格需要居中其他单元格需要左对齐那就用 render 精准控制不要一刀切。5.3 一些实用经验大数据量性能优化、响应式布局取舍rowSpan的合并计算本质上是 O(n) 的遍历数据量几千行也没问题。真正影响体验的是渲染大量合并单元格时的重排成本。如果表格行数比较多建议在预处理时直接把 span 字段挂到数据对象上不要每次都临时计算。同时可以加上一层按field的缓存只有原始数据真正变化时才重算。响应式布局是另一个容易翻车的地方。表格在窄屏下如果出现横向滚动合并单元格的宽度会跟着整体表格宽度走但固定列和普通列之间的缝隙偶尔会有 1px 偏差导致合并区域边框对不齐。这种问题通常出现在多列合并且宽度差异大的场景肉眼很难察觉截图时却很显眼。我的建议是优先保证桌面端体验移动端可以考虑把需要合并的表格切换成卡片列表而不是硬塞进横向滚动容器。最后分享一个小经验凡是涉及 rowSpan 需求我都习惯在开发前先在纸上画一个 3 行 3 列的示意表格把哪一行哪一列要合并、合并后谁隐藏、谁保留全部标出来再开始写代码。这个习惯帮我少踩了很多坑尤其是多个列同时合并的时候提前画出合并矩阵比讨论半天实现方案效率高得多。 
长河君 · 2026/10/20 7:33:38 · 阅读 1.2k NaiveUI表格跨行合并详解：从rowSpan配置到自动预处理实战
在前后台管理系统里表格数据合并是个很常见又容易被低估的需求。我最早接触 NaiveUI 的 rowSpan 时以为就是一个简单的属性真正上手做报表才发现里面藏着不少细节。这篇文章就把 rowSpan 从概念、配置到实战、踩坑完整讲透尤其是处理“按相同字段自动合并”这种高频场景非常适合正在做数据表格、报表模块、管理后台的同学参考。1. rowSpan 的使用场景与表格合并机制1.1 从需求出发为什么报表里缺不了跨行合并先抛一个很典型的场景销售报表里同一个“分类”下面有多条商品记录比如“数码”下有手机、耳机、充电器每行都要显示分类名称。如果每一行都写上“数码”表格会显得特别重复也不利于视觉分组。产品经理大概率会要求你做成这样分类列只在第一行出现下面的几行合并成一个整块居中展示。这本质就是跨行合并。类似的需求还有课程表里同一个教室跨节次合并、订单明细里同一个订单号跨多行合并、项目排期表格里部门跨周合并。它们都有一个共同点某列的值在多行内是相同或连续的需要把连续区域的首行单元格纵向拉通隐藏后续行里该单元格的独立呈现。在原生 HTML 表格里直接对td设置rowspan属性就能实现。但在 NaiveUI 的DataTable组件里表格是数据驱动的我们不能手动去操作 DOM而是要在列配置里告诉组件这个列什么时候需要合并、合并多少行。1.2 NaiveUI 表格中的 rowSpan / colSpan 是怎么工作的NaiveUI 的DataTable列配置对象里提供了rowSpan和colSpan两个属性。很多初学的人误以为这是写在n-data-table标签上的实际上它是columns数组里某个列的配置项。以rowSpan为例在某个列的配置中写{ title: 分类, key: category, rowSpan: (rowData) rowData.categorySpan }当这一列的rowSpan函数返回一个大于 1 的数字 N 时代表当前单元格向下跨越 N 行。与此同时被跨掉的后续行里这一列的位置会被“占住”不再重复渲染内容。关键点来了rowSpan的值不是 NaiveUI 自动帮你按内容算出来的你必须自己计算好每个数据行该返回多少尤其是后续行要返回 0表示“这一行的这一列不显示了”这样才能形成从第一个单元格往下合并一整块的效果。colSpan的工作原理类似只是方向从纵向变成横向用于跨列合并表头或者多列单元格。两者可以组合使用但组合时要特别注意边界条件这一点后面我会专门讲。1.3 rowSpan 返回值“0 / 1 / N”分别是什么含义我见过不少同学在rowSpan函数里返回true、返回字符串2结果完全不生效。这里先统一概念rowSpan的返回值必须是数字。返回值含义典型使用场景0当前行的该单元格被隐藏不参与展示作为合并区域内非第一行的标记1不发生合并正常显示一个单元格默认状态的写法NN 1当前单元格向下合并 N 行一组连续相同数据的首行也就是说一个完整的合并组里第一行的rowSpan要等于组内行数后续每行的rowSpan要等于 0。这也是最常见的数据预处理思路。2. 配置 rowSpan 的两种方式与踩坑点2.1 静态写法列配置里直接写死 rowSpan如果你要合并的行数相对固定或者不需要根据数据计算可以直接把rowSpan写成一个常量数字。{ title: 备注, key: remark, rowSpan: 2 }这种写法意味着表格每一行的“备注”列都会向下合并 2 行。但说实话实际业务中这种完全固定的合并非常少见。它更适合用在表头或者某些特殊固定结构里比如第一列始终每两行合并一次。更多情况下我们还是需要让组件根据每一行的数据动态计算合并数。2.2 动态写法通过函数按当前行数据返回更通用的方式是让rowSpan成为一个函数函数签名大概长这样rowSpan: (rowData, rowIndex) { // rowData 是当前行的数据对象 // rowIndex 是当前行在 data 数组中的索引 return rowData.span ?? 1 }函数的作用很直接组件渲染某一行的这一列时去问你“这里要合并吗合并几行”你根据rowData里的某个字段返回数字即可。为了让数据清洗和视图逻辑分离我习惯先对原始数据做一次预处理在数据里标记出每个合并组的首行和尾行然后列配置里只做一层“取值转发”。{ title: 分类, key: category, rowSpan: (rowData) rowData.categorySpan ?? 1 }这样columns配置非常稳定将来数据变化时只需要重新跑一下预处理函数不需要动列结构。2.3 写 rowSpan 函数时最容易忽略的三个细节第一个细节一定要给后续行也设置span 0哪怕它们的数据里仍然有 category 字段。如果不设置 0你可能会看到合并列里重复出现文字或者出现错位因为组件认为每一行都该正常显示这个单元格。第二个细节rowSpan函数里返回的值一旦大于当前行到末尾的剩余行数组件不会报错但实际合并效果会变得不可控。比如后面只有 2 行数据你却返回了 5表现就可能异常。所以预处理时合并组不能跨越数组尾部。第三个细节如果你同时用rowIndex做了逻辑判断请务必确认rowIndex是当前渲染数据里的一维索引而不是全局数据集的索引。尤其是在分页、排序之后rowIndex会基于当前页的数据重新编号。把rowIndex和绝对数据的下标混用是排查合并错位时最让人头疼的原因之一。3. 实战按照重复字段自动合并跨行单元格3.1 数据准备与期望效果我现在模拟一个商品销量表原始数据是这样的const rawData [ { id: 1, category: 数码, product: 手机, amount: 3200 }, { id: 2, category: 数码, product: 耳机, amount: 800 }, { id: 3, category: 数码, product: 充电器, amount: 120 }, { id: 4, category: 家电, product: 冰箱, amount: 2600 }, { id: 5, category: 家电, product: 洗衣机, amount: 1900 }, { id: 6, category: 家居, product: 沙发, amount: 4300 } ]期望的效果是分类列中“数码”占 3 行“家电”占 2 行“家居”占 1 行每一个分类的值只显示在对应合并区域的第一行并且垂直居中。要做到这一点核心是先把数据中相同且相邻的category归成组然后给组内首行设置categorySpan 组内行数组内其他行设置categorySpan 0。3.2 写一个预处理函数给数据打上行 span 标记这里有一个隐藏背景默认情况下category相同但不相邻的行不应该被合并。比如两条“数码”中间夹了一条“家电”如果强行把首尾两条“数码”并在一起会跨过其他数据这在表格合并里是错误行为。所以正确处理方式是“连续值分组”而不是“全局相同值分组”。下面这个markRowSpan函数只处理“相邻相同项”的分组是基础但足够稳的方案function markRowSpan(data, field, spanField) { const result data.map((item) ({ ...item })) let i 0 while (i result.length) { let j i 1 while (j result.length result[j][field] result[i][field]) { j } const count j - i result[i][spanField] count for (let k i 1; k j; k) { result[k][spanField] 0 } i j } return result }调用方式很简单const tableData markRowSpan(rawData, category, categorySpan)如果原始数据的字段顺序和你想分组的不一致建议先排序再调用或者在预处理前做一次排序。不然相邻判断会得到和你预期完全不同的分组。如果同一张表里有多个列需要合并可以继续扩展这个函数传入多个字段和多个 span 字段。比如function markRowSpans(data, configs) { // configs: [{ fromField: category, toField: categorySpan }, ...] // 逐个调用 markRowSpan }不过要注意多个列同时合并时如果它们的合并边界不重合表格渲染会非常复杂。真实项目中遇到多列各自独立分组的情况我一般建议拆分表格或者先交互确认需求不要一股脑全塞给表格去硬撑。3.3 在 columns 中接入 rowSpan并处理居中展示预处理完成后columns配置就很简单了const columns [ { title: 分类, key: category, rowSpan: (rowData) rowData.categorySpan, render(rowData) { return h(div, { style: display: flex; align-items: center; justify-content: center; height: 100%; }, rowData.category) } }, { title: 商品, key: product }, { title: 销量, key: amount } ]这里用render包一层 div 是为了让合并后的文字视觉上居中。如果不包默认的位置通常在单元格顶部合并区域一大片时文字会显得很靠上观感不好。3.4 完整代码与运行效果说明完整组件代码长这样template n-data-table :columnscolumns :datatableData :borderedtrue / /template script setup import { h } from vue import { NDataTable } from naive-ui const rawData [ { id: 1, category: 数码, product: 手机, amount: 3200 }, { id: 2, category: 数码, product: 耳机, amount: 800 }, { id: 3, category: 数码, product: 充电器, amount: 120 }, { id: 4, category: 家电, product: 冰箱, amount: 2600 }, { id: 5, category: 家电, product: 洗衣机, amount: 1900 }, { id: 6, category: 家居, product: 沙发, amount: 4300 } ] function markRowSpan(data, field, spanField) { const result data.map((item) ({ ...item })) let i 0 while (i result.length) { let j i 1 while (j result.length result[j][field] result[i][field]) { j } const count j - i result[i][spanField] count for (let k i 1; k j; k) { result[k][spanField] 0 } i j } return result } const tableData markRowSpan(rawData, category, categorySpan) const columns [ { title: 分类, key: category, rowSpan: (rowData) rowData.categorySpan, render(rowData) { return h( div, { style: display: flex; align-items: center; justify-content: center; height: 100%; }, rowData.category ) } }, { title: 商品, key: product }, { title: 销量, key: amount } ] /script运行之后分类列会正确显示三块合并区域“数码”跨 3 行、“家电”跨 2 行、“家居”跨 1 行。其他列保持原有布局不受影响。4. rowSpan 疑难杂症排查与解决方案4.1 rowSpan 明明配置了却不生效先检查这几个点遇到 rowSpan 没生效先不要怀疑组件有 bug按顺序自查第一检查rowSpan是不是写在了列配置对象里而不是表格组件标签上。我把这个错误见过不只一次。第二检查函数返回值类型。一定要是数字2和2看似差不多但组件内部不一定做隐式转换。返回undefined时会当做 1 处理看起来就像没合并一样。第三检查当前列是否同时设置了renderrender 返回的内容如果是一个原生td结构可能会覆盖掉合并逻辑。普通场景下render只负责内部内容不要返回整个 td。第四确认数据连续。如果一组相同值中间夹了其他值那么这一组不会自动跨越中间行合并。除非你的预处理函数有意合并不相邻分组否则这不是 bug是数据结构问题。4.2 合并后单元格错位、多合并或漏合并错位是最常见的现象之一。我遇到过一种典型情况数据里有两个字段都是数字其中一个在提取时因为map操作变成了字符串而另一个是数字导致判断失效本应连续的分组被切开表格出现“多合并”或“漏合并”。解决这个问题的思路是把markRowSpan这类纯函数单独抽出来统一做字段归一化。调试的时候先在控制台打印预处理结果确认每个categorySpan是否符合预期再去看表格渲染效果。如果只有部分列错位另一个怀疑点是多个列同时配置了 rowSpan 且合并组边界交叉。比如 A 列按分类合并B 列按品牌合并分类和品牌的层级不一致合并边界相交叉表格很难渲染正确。遇到这种需求先调整数据模型把交叉结构拍平。4.3 固定列、排序、筛选、分页和 rowSpan 的冲突先说固定列。理论上fixed: left可以和rowSpan同时配置但在实际项目中我发现固定列本身会生成一层额外的表格结构合并单元格的尺寸计算偶尔会出偏差。如果你遇到固定列下合并区域高度不对、出现空白或者遮挡建议把要合并的列放在非固定区域或者给固定列单独做样式补偿。排序对 rowSpan 的影响更直接。NaiveUI 的本地排序会改变数据顺序但数据里已经算好的categorySpan不会跟着变。也就是说排序前“数码”跨 2 行排序后这 2 行被拆散了表格还按旧的 span 值去合并必然出错。解决方案有两个不使用本地排序排序逻辑放到后端接口接口返回新的数据后再重跑markRowSpan。如果坚持用本地排序监听update:sorter事件在排序回调里拿到排序后的数据重新执行预处理。template n-data-table :columnscolumns :datatableData row-keyid update:sorterhandleSorter / /templatefunction handleSorter(sorter) { // 假设 sortedData 是根据 sorter 对 rawData 排序后的新数组 tableData.value markRowSpan(sortedData, category, categorySpan) }筛选的原理也类似筛选后的数据如果是新数组同样要重新计算 span。有一种省心但需要注意的做法是把排序和筛选后的数据再做一次 findIndex 映射但这本质上还是要保证 span 字段和当前渲染数据同步。分页的问题更麻烦。跨页合并天然不可行因为不同页面的数据是独立渲染的。如果某个合并组跨了页第一页的最后一条和第二页的第一条其实是同一组但表格分页后无法感知这一点。结果可能是第一页正确显示了一个跨到本页末尾的合并区域第二页对应位置却因为 span 是 0 而显示空白用户看到数据缺失。处理方式通常有两种让后端在分页时按页返回已计算好的 span保证当前页内的每组数据正确。在前端分页场景下合并组只允许上页尾部断开不跨页合并。也就是说分页后的每一页需要独立预处理而不是拿全量数据算一次再切片。function computePageData(allData, page, pageSize) { const pageData allData.slice((page - 1) * pageSize, page * pageSize) return markRowSpan(pageData, category, categorySpan) }这种按页预处理的写法虽然可能让某个合并组在上一页是完整的、下一页第一行又重新开始但至少每一页显示都不会出现空白或错位。产品上如果无法接受那就改用服务端分页方案。4.4 行选择、展开行与合并单元格如何共存如果表格同时使用type: selection的行选择列会出现一个现象选择列是独立于数据列的每一行都有 checkbox合并过的数据行也被视为普通行可以单独勾选。这个行为本身不算 bug但从交互上看一个被合并成单一“分类”的区域内用户可能以为只会选中一条数据实际却能选中多行。如果你希望合并组内的行在选择时只算一条要么在拿到选择结果后按合并组过滤要么在 rowSpan 计算时把合并组作为一个整体记录提交时统一处理。展开行也类似。展开行功能会给每一行增加一个额外的展开按钮列它和 rowSpan 没有直接冲突但如果你展开的内容高度不固定会让合并单元格的高度估算出问题。建议合并和展开行不要放在同一个表格里除非你已经对动态高度做了充分测试。5. 扩展玩法colSpan、复杂表头与样式微调5.1 跨行与跨列组合的实现思路除了纵向的rowSpanNaiveUI 还支持横向的colSpan。比如某个单元格需要横跨两列就可以在列配置里写{ title: 合计, key: total, colSpan: (rowData) rowData.colSpanValue }实际业务里跨列合并通常出现在统计表格的“合计”行表格前面的几列都是空单元格最后一列横跨多个单元格显示汇总内容。这种结构用原生 HTML 不难但在 NaiveUI 数据表格里需要精细计算每一列的 span。跨行和跨列组合时比如某个汇总行既跨多行又跨多列强烈建议先把合并模型画出来标注出每个单元格的rowSpan和colSpan再写预处理逻辑。否则在表格渲染阶段发现问题排查成本会很高。5.2 合并单元格文本垂直居中的 CSS 技巧合并之后单元格里的文字位置往往不是最理想的。最直接的办法是给这个列配置render在内容外层包一个 flex 容器render(rowData) { return h( div, { style: { display: flex, alignItems: center, justifyContent: center, minHeight: 36px, height: 100% } }, rowData.category ) }如果希望应用到所有单元格可以通过td-style设置{ tdStyle: text-align: center; vertical-align: middle; }但要留意td-style会影响该列所有 td如果只有合并单元格需要居中其他单元格需要左对齐那就用 render 精准控制不要一刀切。5.3 一些实用经验大数据量性能优化、响应式布局取舍rowSpan的合并计算本质上是 O(n) 的遍历数据量几千行也没问题。真正影响体验的是渲染大量合并单元格时的重排成本。如果表格行数比较多建议在预处理时直接把 span 字段挂到数据对象上不要每次都临时计算。同时可以加上一层按field的缓存只有原始数据真正变化时才重算。响应式布局是另一个容易翻车的地方。表格在窄屏下如果出现横向滚动合并单元格的宽度会跟着整体表格宽度走但固定列和普通列之间的缝隙偶尔会有 1px 偏差导致合并区域边框对不齐。这种问题通常出现在多列合并且宽度差异大的场景肉眼很难察觉截图时却很显眼。我的建议是优先保证桌面端体验移动端可以考虑把需要合并的表格切换成卡片列表而不是硬塞进横向滚动容器。最后分享一个小经验凡是涉及 rowSpan 需求我都习惯在开发前先在纸上画一个 3 行 3 列的示意表格把哪一行哪一列要合并、合并后谁隐藏、谁保留全部标出来再开始写代码。这个习惯帮我少踩了很多坑尤其是多个列同时合并的时候提前画出合并矩阵比讨论半天实现方案效率高得多。