当前位置：首页 > 前端教程

elementui table

2026-01-12 15:26:38前端教程

ElementUI Table 基本用法

ElementUI 的 Table 组件用于展示结构化数据，支持排序、筛选、分页等功能。以下是一个基础示例：

<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: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' }
      ]
    };
  }
};
</script>

表格属性与功能

常用属性

data: 绑定表格数据源（数组格式）。
border: 添加边框（<el-table border>）。
stripe: 启用斑马纹样式（<el-table stripe>）。

分页功能
结合 el-pagination 实现分页：

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next"
  :total="total">
</el-pagination>

自定义列模板

通过 slot-scope 自定义列内容，例如添加操作按钮：

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

排序与筛选

排序: 在列配置中设置 sortable。

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

筛选: 使用 filters 和 filter-method。

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

动态加载与懒加载

动态加载: 通过 v-if 控制列的显隐。
懒加载: 使用 load 方法结合树形表格（<el-table tree-props>）。

响应式适配

通过监听窗口大小变化动态调整表格高度：

mounted() {
  window.addEventListener('resize', this.calcTableHeight);
},
methods: {
  calcTableHeight() {
    this.tableHeight = window.innerHeight - 200;
  }
}