vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue表格行合并

在Vue框架下实现表格行合并的两种方法

作者：邹荣乐

本文介绍了ElementUI和Antd+Vue中el-table和a-table实现行合并的方法,包括基本使用、实现步骤、示例代码等,通过自定义计算合并行数的方法,可以灵活实现表格数据的合并显示,提升数据的可读性和用户体验,需要的朋友可以参考下

一、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、实现步骤

  1. 定义表格数据：获取你的表格数据，这些数据将用于渲染表格。
  2. 对数据进行排序：如果接口返回数据已经做了排序处理，这布可以忽略。
  3. 计算合并行数：编写一个方法来计算每一行需要合并的行数。这个方法会遍历表格数据，根据需要合并的列的值来判断哪些行需要合并。
  4. 设置span-method：在el-table组件中设置span-method属性，并传入你编写的计算合并行数的方法。

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、解释

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、实现步骤

  1. 定义表格数据：获取你的表格数据，这些数据将用于渲染表格。
  2. 对数据进行排序：如果接口返回数据已经做了排序处理，这布可以忽略。
  3. 计算合并行数：编写一个方法来计算每一行需要合并的行数。这个方法会遍历表格数据，根据需要合并的列的值来判断哪些行需要合并。
  4. 设置span-method：在el-table组件中设置span-method属性，并传入你编写的计算合并行数的方法。

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、解释

7、运行效果

以上就是在Vue框架下实现表格行合并的两种方法的详细内容，更多关于Vue表格行合并的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文