el table

El Table 组件详解

el-table 是 Element Plus 组件库中的一个表格组件，广泛应用于 Vue.js 项目中。它提供了丰富的功能和灵活的配置选项，使得开发者能够轻松地构建出功能强大、样式美观的表格。本文将从多个方面详细介绍 el-table 的使用方法和高级功能，帮助开发者更好地理解和应用该组件。

1. 基本用法

el-table 的基本用法非常简单，只需要提供 data 和 columns 即可生成一个基本的表格。以下是一个简单的示例：

<template>
  <el-table :data="tableData" style="width: *">
    <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: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        },
        {
          date: '2023-10-03',
          name: '王五',
          address: '广州市天河区'
        }
      ]
    };
  }
};
</script>

在这个示例中，tableData 是表格的数据源，el-table-column 定义了表格的列，prop 属性指定了数据源中对应的字段，label 属性定义了列头的显示文本。

2. 列配置

el-table-column 提供了多种配置选项，可以满足不同的需求。

2.1 列宽

通过 width 属性可以设置列的宽度，可以是固定值（如 180）或百分比（如 20%）。

<el-table-column prop="date" label="日期" width="180"></el-table-column>

2.2 对齐方式

通过 align 属性可以设置列内容的对齐方式，可选值有 left、center、right。

<el-table-column prop="date" label="日期" align="center"></el-table-column>

2.3 自定义列模板

通过 scoped-slot 可以自定义列的内容。例如，可以在列中显示按钮或其他自定义组件。

<el-table-column label="操作">
  <template #default="scope">
    <el-button @click="handleEdit(scope.row)">编辑</el-button>
    <el-button @click="handleDelete(scope.row)">删除</el-button>
  </template>
</el-table-column>

2.4 排序

通过 sortable 属性可以启用列的排序功能。

<el-table-column prop="date" label="日期" sortable></el-table-column>

2.5 筛选

通过 filters 和 filter-method 属性可以实现列的筛选功能。

<el-table-column prop="name" label="姓名" :filters="[{ text: '张三', value: '张三' }, { text: '李四', value: '李四' }]" :filter-method="filterHandler"></el-table-column>

3. 分页

el-table 通常与 el-pagination 组件结合使用，实现分页功能。

<template>
  <div>
    <el-table :data="tableData" style="width: *">
      <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>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模拟获取数据
      this.tableData = [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        },
        {
          date: '2023-10-03',
          name: '王五',
          address: '广州市天河区'
        }
      ];
      this.total = 3;
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

在这个示例中，el-pagination 组件实现了分页功能，handleSizeChange 和 handleCurrentChange 方法分别处理每页显示条数和当前页的变化。

4. 多选

通过 type="selection" 可以实现多选功能。

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
  <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>

handleSelectionChange 方法可以获取当前选中的行数据。

methods: {
  handleSelectionChange(val) {
    this.selectedRows = val;
  }
}

5. 展开行

通过 type="expand" 可以实现展开行功能。

<el-table :data="tableData">
  <el-table-column type="expand">
    <template #default="scope">
      <p>日期: {{ scope.row.date }}</p>
      <p>姓名: {{ scope.row.name }}</p>
      <p>地址: {{ scope.row.address }}</p>
    </template>
  </el-table-column>
  <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>

6. 合并单元格

通过 span-method 属性可以实现单元格的合并。

<el-table :data="tableData" :span-method="arraySpanMethod">
  <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>

arraySpanMethod 方法定义了合并规则。

methods: {
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    if (rowIndex % 2 === 0) {
      if (columnIndex === 0) {
        return [1, 2];
      } else if (columnIndex === 1) {
        return [0, 0];
      }
    }
  }
}

7. 固定列

通过 fixed 属性可以实现列的固定。

<el-table :data="tableData" style="width: *">
  <el-table-column prop="date" label="日期" width="180" fixed></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>

8. 表头分组

通过 el-table-column-group 可以实现表头的分组。

<el-table :data="tableData" style="width: *">
  <el-table-column-group label="分组">
    <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-group>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

9. 自定义表头

通过 scoped-slot 可以自定义表头。

<el-table :data="tableData" style="width: *">
  <el-table-column prop="date" label="日期" width="180">
    <template #header>
      <span style="color: red;">日期</span>
    </template>
  </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>

10. 响应式布局

el-table 支持响应式布局，可以根据屏幕宽度自动调整列宽。

<el-table :data="tableData" style="width: *" :fit="true">
  <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>

11. 事件处理

el-table 提供了多种事件，如 row-click、cell-click 等，可以处理用户的交互行为。

<el-table :data="tableData" @row-click="handleRowClick">
  <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>

handleRowClick 方法可以处理行点击事件。

methods: {
  handleRowClick(row, column, event) {
    console.log('行点击:', row);
  }
}

12. 样式定制

通过 class-name 和 style 属性可以自定义表格的样式。

<el-table :data="tableData" class="custom-table" style="background-color: #f0f0f0;">
  <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>

.custom-table {
  border: 1px solid #ddd;
}

13. 总结

el-table 是 Element Plus 中一个功能强大且灵活的表格组件，适用于各种复杂的表格场景。通过本文的介绍，开发者可以掌握 el-table 的基本用法和高级功能，从而在实际项目中更好地应用该组件。无论是简单的数据展示，还是复杂的交互需求，el-table 都能提供强大的支持。希望本文能帮助开发者更好地理解和应用 el-table，提升开发效率和用户体验。