elementUi表格合并行数据并展示序号的方法是什么

发布时间：2023-04-25 10:07:34 作者：iii
来源：亿速云阅读：241

ElementUI表格合并行数据并展示序号的方法

引言

在前端开发中，表格（Table）是一个非常常见的组件，用于展示结构化数据。ElementUI 是一个基于 Vue.js 的 UI 组件库，提供了丰富的表格功能，包括排序、筛选、分页、合并单元格等。在实际开发中，我们经常会遇到需要合并表格行数据并展示序号的需求。本文将详细介绍如何使用 ElementUI 实现表格行数据的合并，并在合并后的表格中展示序号。

1. ElementUI 表格基础

在开始之前，我们先简单回顾一下 ElementUI 表格的基本用法。ElementUI 提供了 el-table 组件来创建表格，通过 el-table-column 组件来定义表格的列。

<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: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  }
}
</script>

上述代码展示了一个简单的表格，表格数据通过 tableData 数组传入，每一列通过 el-table-column 组件定义。

2. 合并行数据

在某些情况下，我们需要将表格中的某些行合并，以展示更清晰的数据结构。ElementUI 提供了 span-method 属性来实现单元格的合并。

2.1 `span-method` 属性

span-method 是一个函数，用于设置单元格的合并方式。该函数接收一个对象参数，包含 row、column、rowIndex 和 columnIndex 四个属性。函数需要返回一个包含 rowspan 和 colspan 的对象，分别表示单元格的行跨度和列跨度。

spanMethod({ row, column, rowIndex, columnIndex }) {
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return {
        rowspan: 2,
        colspan: 1
      };
    } else if (columnIndex === 1) {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
}

上述代码表示，如果 rowIndex 是偶数，那么第一列单元格将跨两行，第二列单元格将被隐藏。

2.2 实现行数据合并

假设我们有一个表格，需要根据某一列的值来合并行数据。例如，我们有一个表格展示不同部门的员工信息，我们希望将同一部门的员工信息合并显示。

<template>
  <el-table :data="tableData" :span-method="spanMethod" style="width: 100%">
    <el-table-column prop="department" label="部门" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="position" label="职位"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          department: '技术部',
          name: '张三',
          position: '前端开发'
        },
        {
          department: '技术部',
          name: '李四',
          position: '后端开发'
        },
        {
          department: '市场部',
          name: '王五',
          position: '市场经理'
        },
        {
          department: '市场部',
          name: '赵六',
          position: '市场专员'
        }
      ]
    }
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const department = row.department;
        const prevRow = this.tableData[rowIndex - 1];
        if (prevRow && prevRow.department === department) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else {
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (this.tableData[i].department === department) {
              rowspan++;
            } else {
              break;
            }
          }
          return {
            rowspan,
            colspan: 1
          };
        }
      }
    }
  }
}
</script>

在上述代码中，我们通过 spanMethod 方法实现了根据 department 列的值来合并行数据。如果当前行的 department 与上一行相同，则隐藏当前行的 department 单元格；否则，计算当前 department 的连续行数，并设置 rowspan。

3. 展示序号

在表格中展示序号是一个常见的需求。ElementUI 提供了 type="index" 属性来展示序号列。

<el-table-column type="index" label="序号" width="80"></el-table-column>

上述代码将在表格中展示一个序号列，序号从 1 开始自动递增。

3.1 合并行数据后展示序号

在合并行数据后，序号的展示可能会出现问题。例如，如果某一行被合并了多行，那么序号列也会被合并，导致序号不连续。为了解决这个问题，我们需要自定义序号列的展示方式。

<template>
  <el-table :data="tableData" :span-method="spanMethod" style="width: 100%">
    <el-table-column label="序号" width="80">
      <template slot-scope="scope">
        <span>{{ getRowIndex(scope.$index) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="department" label="部门" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="position" label="职位"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          department: '技术部',
          name: '张三',
          position: '前端开发'
        },
        {
          department: '技术部',
          name: '李四',
          position: '后端开发'
        },
        {
          department: '市场部',
          name: '王五',
          position: '市场经理'
        },
        {
          department: '市场部',
          name: '赵六',
          position: '市场专员'
        }
      ]
    }
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        const department = row.department;
        const prevRow = this.tableData[rowIndex - 1];
        if (prevRow && prevRow.department === department) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else {
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (this.tableData[i].department === department) {
              rowspan++;
            } else {
              break;
            }
          }
          return {
            rowspan,
            colspan: 1
          };
        }
      }
    },
    getRowIndex(index) {
      return index + 1;
    }
  }
}
</script>

在上述代码中，我们通过自定义 el-table-column 的 template 来展示序号。getRowIndex 方法返回当前行的序号，确保序号在合并行数据后仍然连续。

4. 完整示例

下面是一个完整的示例，展示了如何合并行数据并展示序号。

<template>
  <el-table :data="tableData" :span-method="spanMethod" style="width: 100%">
    <el-table-column label="序号" width="80">
      <template slot-scope="scope">
        <span>{{ getRowIndex(scope.$index) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="department" label="部门" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="position" label="职位"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          department: '技术部',
          name: '张三',
          position: '前端开发'
        },
        {
          department: '技术部',
          name: '李四',
          position: '后端开发'
        },
        {
          department: '市场部',
          name: '王五',
          position: '市场经理'
        },
        {
          department: '市场部',
          name: '赵六',
          position: '市场专员'
        }
      ]
    }
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        const department = row.department;
        const prevRow = this.tableData[rowIndex - 1];
        if (prevRow && prevRow.department === department) {
          return {
            rowspan: 0,
            colspan: 0
          };
        } else {
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (this.tableData[i].department === department) {
              rowspan++;
            } else {
              break;
            }
          }
          return {
            rowspan,
            colspan: 1
          };
        }
      }
    },
    getRowIndex(index) {
      return index + 1;
    }
  }
}
</script>

5. 总结

通过本文的介绍，我们了解了如何使用 ElementUI 实现表格行数据的合并，并在合并后的表格中展示序号。关键点在于使用 span-method 属性来控制单元格的合并方式，并通过自定义 el-table-column 的 template 来展示序号。希望本文能帮助你在实际开发中更好地使用 ElementUI 表格组件。