关于Element Plus表格合并小记

基于Element Plus表格合并的实现指南

在前端开发中，数据展示是一个非常重要的环节，而表格（Table）则是最常用的展示方式之一。Element Plus 是一个基于 Vue 3 的组件库，提供了丰富的表格功能。本文将介绍如何使用 Element Plus 实现表格单元格合并（合并行和合并列），从而更好地展示数据。

一、前置准备

在开始之前，请确保您的项目已经安装了 Vue 3 和 Element Plus。如果没有，请按照以下步骤安装：

bash
# 安装 Vue 3
npm install vue@next

# 安装 Element Plus
npm install element-plus --save

在项目入口文件中引入 Element Plus：

javascript
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

二、基础表格的创建

首先，我们创建一个基本的表格组件，用于展示数据。

html
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2024-01-01', name: '张三', address: '北京' },
        { date: '2024-01-01', name: '李四', address: '上海' },
        { date: '2024-01-02', name: '王五', address: '广州' },
        { date: '2024-01-02', name: '赵六', address: '深圳' },
      ],
    }
  },
}
</script>

三、实现表格单元格合并

要实现表格单元格的合并，我们需要使用 Element Plus 提供的 span-method 属性，该属性接收一个方法，用于定义单元格的合并方式。

html
<template>
  <el-table :data="tableData" style="width: 100%" :span-method="spanMethod">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2024-01-01', name: '张三', address: '北京' },
        { date: '2024-01-01', name: '李四', address: '上海' },
        { date: '2024-01-02', name: '王五', address: '广州' },
        { date: '2024-01-02', name: '赵六', address: '深圳' },
      ],
    }
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
    },
  },
}
</script>

在上面的代码中，spanMethod 方法根据 rowIndex 和 columnIndex 来决定单元格的合并。具体来说，如果当前单元格在第一列，并且行索引为偶数，则合并当前单元格及其下方的单元格；否则，将单元格隐藏。

四、动态合并单元格

有时我们可能需要根据数据动态合并单元格。下面是一个更复杂的示例，根据日期来合并单元格：

html
<template>
  <el-table :data="tableData" style="width: 100%" :span-method="spanMethod">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2024-01-01', name: '张三', address: '北京' },
        { date: '2024-01-01', name: '李四', address: '上海' },
        { date: '2024-01-02', name: '王五', address: '广州' },
        { date: '2024-01-02', name: '赵六', address: '深圳' },
      ],
    }
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const currentDate = row.date
        const prevDate = this.tableData[rowIndex - 1]?.date
        const nextDate = this.tableData[rowIndex + 1]?.date

        if (currentDate !== prevDate) {
          let rowspan = 1
          let nextIndex = rowIndex + 1

          while (this.tableData[nextIndex]?.date === currentDate) {
            rowspan++
            nextIndex++
          }

          return {
            rowspan,
            colspan: 1,
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
    },
  },
}
</script>

五、动态合并单元格（带分割行）

有时我们可能需要根据数据动态合并单元格。下面是一个更复杂的示例，根据日期来合并单元格：

html
<template>
  <el-table :data="tableData" style="width: 100%" :span-method="spanMethod">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2024-01-01', name: '张三', address: '北京' },
        { date: '2024-01-01', name: '李四', address: '上海' },
        { date: '2024-01-02', name: '王五', address: '广州' },
        { date: '2024-01-02', name: '赵六', address: '深圳' },
      ],
    }
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (JSON.stringify(row) === '{}') {
      // 分割行
        if (columnIndex === 0) {
          // 此处的空白行和空白列可根据实际情况调整
          return { rowspan: 1, colspan: 12 }
        } else {
          // 隐藏单元格
          return { rowspan: 0, colspan: 0 }
        }
      } else {
        // 非分割行
        // 当前单元格列名称
        const fileName = column.property
        // 当前单元格值
        const currentVlue = row[fieldName]
        
        // 获取上一行相同列的单元格
        const preRow = tableData.value[rowIndex - 1]
        // 获取删一行相同列的单元格的值
        const preRowValue = preRow === undefined ? 'not exist' : JSON.stringify(preRow) === '{}' ? 'split row' : preRow[fieldName]
        if (preRowValue === currentValue) {
          // 隐藏当前单元格
          return { rowspan: 0, colspan: 0}
        } else {
          let rowspan = 1
          for (let i = rowIndex + 1; i< tableData.value.length; i++) {
            const nextRow = tableData.value[i]
            const nextValue = nextRow === undefined ? 'not exist' : JSON.stringify(nextRow) === '{}' ? 'split row' : nextRow[fieldName]
            if (currentValue === nextValue) {
              rowspan++
            } else {
              break
            }
          }
          return { rowspan: rowspan, colspan: 1 }
        }
      }
    },
  },
}
</script>

在这个示例中，spanMethod 方法通过比较当前单元格的日期和前一个单元格的日期来决定是否合并。如果当前日期与前一个日期不相同，则开始计算需要合并的行数，并返回合并参数。

六、总结

使用 Element Plus 实现表格单元格合并可以使数据展示更加直观和简洁。通过灵活运用 span-method 属性，我们可以根据业务需求自定义合并逻辑，提升用户体验。希望本文能帮助你更好地掌握表格合并的技巧，打造更加优雅的前端界面。

扩展阅读

通过以上学习和实践，您应该能够轻松地在项目中实现表格单元格的合并，为数据展示提供更好的解决方案。

目录