前端vue表格el-table或a-table合并行的功能实现

文章目录

• • • 一、el-table 行合并
    • • 1、初识 el-table
      • 2、el-table 的基本使用
      • 3、行合并的实现
      • 4、实现步骤
      • 5、示例代码
      • 6、解释
      • 7、运行效果
    • 二、a-table 行合并
    • • 1、初识 a-table
      • 2、a-table 的基本使用
      • 3、行合并的实现
      • 4、实现步骤
      • 5、示例代码
      • 6、解释
      • 7、运行效果

一、el-table 行合并

在前端开发中，数据展示一直是一个重要的部分，而表格则是数据展示最常见的形式之一。ElementUI 是饿了么前端团队推出的一款基于 Vue 的 UI 组件库，其中的 el-table 组件是一个功能强大且灵活的表格组件。今天我们要详细探讨的是 el-table 的行列合并操作。

1、初识 el-table

el-table 是一个提供了丰富功能和极高定制性的表格组件。它不仅能展示常规的表格数据，还可以实现复杂的数据处理和展示需求，如排序、过滤、分页、合并单元格等。而在实际开发中，行列合并是一个非常实用的功能，尤其是在展示报表数据时，能够极大地提升数据的可读性和用户体验。

2、el-table 的基本使用

在开始讨论行列合并之前，我们先简单了解一下 el-table 的基本使用方法。我们可以通过 el-table 标签和 el-table-column 标签来定义一个表格。el-table 用于定义整个表格，而 el-table-column 用于定义表格中的每一列。

3、行合并的实现

行合并是指将相同数据的相邻行合并成一个单元格，这在数据表格中非常常见。ElementUI 通过 span-method 属性来实现行合并功能。span-method 是一个方法，用于设置单元格的 rowspan 和 colspan。该方法的返回值是一个包含 rowspan 和 colspan 的对象，通过它们可以控制单元格的合并。

4、实现步骤

5、示例代码

<template>
<div class="about">
<h2 style="margin-top: 10px;">element–plus 合并行示例</h2>
<div style="margin-bottom: 10px;">
在Vue中使用Element UI的el–table组件时，可以通过span–method属性来合并表格中的单元格。
</div>
<el–table :data="tableData" :span–method="objectSpanMethod" border style="width: 100%">
<el–table–column prop="name" label="Name" />
<el–table–column prop="age" label="Age" />
<el–table–column prop="address" label="Address" />
</el–table>
</div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
const spanArr = ref([])
const tableData = ref([
{ key: '1', name: 'Mike', age: 30, address: 'Chicago' },
{ key: '2', name: 'Alice', age: 22, address: 'Phoenix' },
{ key: '3', name: 'John', age: 25, address: 'New York' },
{ key: '4', name: 'Mike', age: 31, address: 'Houston' },
{ key: '5', name: 'John', age: 26, address: 'Los Angeles' },
{ key: '6', name: 'jack', age: 22, address: 'aPhoenix' },
])

// 排序方法
const sortData = () => {
tableData.value.sort((a, b) => a.name.localeCompare(b.name))
// 计算合并行数
calculateSpanArr()
}

// 计算合并行数
const calculateSpanArr = () => {
const tempArr = []
let position = 0
// 这里以姓名重复的数据进行合并，实际应用中可以根据需求调整合并规则
tableData.value.forEach((item, index) => {
if (index === 0) {
tempArr.push(1)
position = 0
} else {
if (item.name === tableData.value[index – 1].name) {
tempArr[position] += 1
tempArr.push(0)
} else {
tempArr.push(1)
position = index
}
}
})

spanArr.value = tempArr
}

// 合并单元格方法
const objectSpanMethod = ({ columnIndex, rowIndex }) => {
if (columnIndex === 0) {
return {
rowspan: spanArr.value[rowIndex],
colspan: spanArr.value[rowIndex] > 0 ? 1 : 0
}
}
return { rowspan: 1, colspan: 1 }
}

onMounted(() => {
sortData() // 初始加载时自动排序
})
</script>

6、解释

• 表格数据：tableData数组包含了需要展示的表格数据。

• 计算合并行数：calculateSpanArr方法遍历tableData，根据name字段的值来计算每一行需要合并的行数，并将结果存储在spanArr数组中。

• span-method：objectSpanMethod方法根据columnIndex来判断是否需要合并单元格。如果columnIndex为0（即第一列），则返回spanArr数组中对应的值；否则，返回[1, 1]表示正常显示单元格。

• 组件挂载：在mounted生命周期钩子中调用calculateSpanArr方法来初始化spanArr数组。

• 这样，当表格数据中的第一列有相同值时，这些值所在的单元格就会被合并。

7、运行效果

二、a-table 行合并

antd+vue是我目前项目的主流，在工作过程中，经常用到table组件。比如：当有大量结构化的数据需要展现时；当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

1、初识 a-table

A-Table 是 Ant Design 提供的一个功能强大的表格组件，用于展示结构化数据并支持分页、排序、筛选等功能。

2、a-table 的基本使用

A-Table 支持多种属性来定制表格的行为和外观。常见的属性包括 columns（列定义）、dataSource（数据源）、pagination（分页设置）等。

3、行合并的实现

使用customCell和customRender实现首列相同数据合并。

4、实现步骤

5、示例代码

<template>
<div class="about">
<h2 style="margin-top: 10px;">ant–design–vue 合并行示例</h2>
<div style="margin-bottom: 10px;">
以下是基于Ant Design Vue的表格合并实现，使用customCell和customRender实现首列相同数据合并：
</div>
<a–table :dataSource="tableData" :columns="columns" bordered />
</div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'

const tableData = ref([
{ key: '1', name: 'Mike', age: 30, address: 'Chicago' },
{ key: '2', name: 'Alice', age: 22, address: 'Phoenix' },
{ key: '3', name: 'John', age: 25, address: 'New York' },
{ key: '4', name: 'Mike', age: 31, address: 'Houston' },
{ key: '5', name: 'John', age: 26, address: 'Los Angeles' },
{ key: '6', name: 'jack', age: 22, address: 'aPhoenix' },
])

// 转换为 element-plus 合并行格式
const spanMap = ref({})

// 计算合并规则
const calculateSpans = () => {
const tempMap = {}
let position = 0
// 这里以姓名重复的数据进行合并，实际应用中可以根据需求调整合并规则
tableData.value.forEach((item, index) => {
if (index === 0) {
tempMap[index] = { span: 1 }
position = 0
} else {
if (item.name === tableData.value[index – 1].name) {
tempMap[position].span += 1
tempMap[index] = { span: 0 }
} else {
tempMap[index] = { span: 1 }
position = index
}
}
})
spanMap.value = tempMap
}

// 排序方法
const sortData = () => {
tableData.value.sort((a, b) => a.name.localeCompare(b.name))
// 重新计算合并规则
calculateSpans()
}

// 列定义
const columns = [
{
title: 'Name',
dataIndex: 'name',
customCell: (_, index) => {
return {
rowSpan: spanMap.value[index]?.span || 0
}
}
},
{
title: 'Age',
dataIndex: 'age'
},
{
title: 'Address',
dataIndex: 'address'
}
]

onMounted(() => {
sortData() // 初始加载时自动排序
})
</script>

6、解释

• 合并机制：Ant Design使用customCell返回rowSpan实现合并，不同于Element Plus的span-method
• 数据结构：必须包含key字段作为唯一标识
• API：列定义通过columns数组配置，合并逻辑写在customCell中
• 零值处理：被合并的行需要返回rowSpan: 0

7、运行效果