高效协作！轻松实现element-UI表格行合并

2023-12-29 03:27:36

1. 理解行合并原理

行合并的原理其实很简单，就是将具有相同值的相邻单元格合并成一个单元格。这样可以使表格更加紧凑，数据更加直观。在element-UI中，我们可以通过设置span属性来实现行合并。span属性的值表示要合并的单元格数量。

2. 实现行合并代码

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="age" label="年龄" width="80"></el-table-column>
    <el-table-column prop="city" label="城市" width="150"></el-table-column>
  </el-table>
</template>

<script>
import { ref } from 'vue'
import { ElTable, ElTableColumn } from 'element-ui'

export default {
  components: { ElTable, ElTableColumn },
  setup() {
    const tableData = ref([
      { id: 1, name: '张三', age: 20, city: '北京' },
      { id: 2, name: '李四', age: 22, city: '上海' },
      { id: 3, name: '王五', age: 25, city: '广州' },
      { id: 4, name: '赵六', age: 28, city: '深圳' },
      { id: 5, name: '孙七', age: 30, city: '杭州' },
      { id: 1, name: '张三', age: 20, city: '北京' },
      { id: 2, name: '李四', age: 22, city: '上海' },
      { id: 3, name: '王五', age: 25, city: '广州' },
      { id: 4, name: '赵六', age: 28, city: '深圳' },
      { id: 5, name: '孙七', age: 30, city: '杭州' }
    ])

    return {
      tableData
    }
  }
}
</script>