ElementUI中的Table表格如何跨列合并表头

2023-11-09 19:09:45

一、前言
在使用ElementUI构建表格界面的过程中，可能会遇到需要跨列合并表头的情况。本文将详细介绍如何实现这一功能，并提供相关示例代码和步骤。

二、基本概念

在ElementUI中，Table组件的表头可以通过设置span属性来实现跨列合并。span属性的值表示要合并的列数。例如，如果要合并两列，则将span属性设置为2。

三、实现步骤

导入必要的组件

import { TableColumn } from 'element-ui';

定义需要合并的列

const columns = [
  {
    prop: 'name',
    label: '姓名',
  },
  {
    prop: 'age',
    label: '年龄',
  },
  {
    prop: 'address',
    label: '地址',
    span: 2, // 合并两列
  },
  {
    prop: 'phone',
    label: '电话',
  },
];

将列数组传递给Table组件的columns属性

<el-table :columns="columns">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址" span="2"></el-table-column>
  <el-table-column prop="phone" label="电话"></el-table-column>
</el-table>

四、注意事项

span属性只能应用于表头列，不能应用于表格内容。
合并的列必须是连续的。
如果要合并多列，则需要将这些列放在一起。

五、示例代码

import { TableColumn } from 'element-ui';

const columns = [
  {
    prop: 'name',
    label: '姓名',
  },
  {
    prop: 'age',
    label: '年龄',
  },
  {
    prop: 'address',
    label: '地址',
    span: 2, // 合并两列
  },
  {
    prop: 'phone',
    label: '电话',
  },
];

const data = [
  {
    name: '张三',
    age: 20,
    address: '北京市海淀区',
    phone: '13800138000',
  },
  {
    name: '李四',
    age: 25,
    address: '上海市浦东新区',
    phone: '13900139000',
  },
  {
    name: '王五',
    age: 30,
    address: '广州市天河区',
    phone: '13700137000',
  },
];

export default {
  data() {
    return {
      columns,
      data,
    };
  },
};