在
Ant Design Vue 4.x
中，
表格中的单元格合并可以通过配置 `customRender` 和 `customCell` 方法
实现。具体步骤如下：
1. 在
表格列的配置项
中，使用 `customRender` 方法自定义
表格内容，并在需要合并单元格的单元格
中使用 `customCell` 方法返回一个包含 `rowspan` 和 `colspan` 属性的对象，指定单元格合并的
行数和列数。
```
js
<template>
<a-
table :columns="columns" :data-source="dataSource" />
</template>
<script>
export default {
name: 'My
Table',
data() {
return {
columns: [
{
title: '姓名',
dataIndex: 'name',
customRender: ({ text, record, index }) => {
if (index === 0) { // 只在第一
行显示姓名
return {
children: text,
customCell: () => ({
rowspan: 2,
colspan: 1
})
}
} else { // 其他
行不显示姓名
return {
children: '',
customCell: () => ({
rowspan: 0,
colspan: 0
})
}
}
}
},
{
title: '年龄',
dataIndex: 'age'
},
{
title: '地址',
dataIndex: 'address'
}
],
dataSource: [
{ name: '张三', age: 25, address: '北京市海淀区' },
{ name: '', age: 30, address: '上海市浦东新区' },
{ name: '李四', age: 35, address: '广州市天河区' },
{ name: '', age: 40, address: '深圳市南山区' },
]
}
}
}
</script>
```
在上面的例子
中，通过 `customRender` 方法自定义了
表格中第一列的内容，并在第一
行的单元格
中使用 `customCell` 方法返回一个包含 `rowspan: 2` 和 `colspan: 1` 的对象，指定单元格合并的
行数和列数。
2. 在需要合并单元格的单元格
中，使用 `customCell` 方法返回一个包含 `rowspan` 和 `colspan` 属性的对象，指定单元格合并的
行数和列数。在其他单元格
中，使用 `customCell` 方法返回一个包含 `rowspan: 0` 和 `colspan: 0` 的对象，将这些单元格隐藏起来。
通过上述方法，即可在
Ant Design Vue 的
表格中实现单元格合并并自定义合并后的单元格内容。
订阅专栏 解锁全文
1633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
