在前端开发中，表格（Table）是一个常见且重要的组件，它用于展示大量结构化数据。Element UI，作为一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库，提供了功能丰富且易于使用的Table组件。本文将深入解析Element UI中的Table组件，探讨其使用方法、功能特性以及优化技巧。
一、Element UI Table组件简介
Element UI的Table组件是一个基于Vue的高性能表格组件，它支持丰富的表格操作，如排序、筛选、分页等。通过简单的配置和属性设置，开发者可以快速搭建出功能完备的表格页面。
1.1 安装与引入
在使用Element UI的Table组件之前，需要先安装并引入Element UI库。可以通过npm或yarn进行安装：
npm install element-ui --save # 或 yarn add element-ui
然后在项目中引入Element UI库和样式：
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
1.2 基本用法
Element UI的Table组件使用非常简单，只需在Vue组件的模板中声明el-table标签，并传入相应的数据即可：
<template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 22 }, { name: '王五', age: 24 }, ], }; }, }; </script>
在上面的例子中，我们创建了一个包含姓名和年龄两列的表格，并通过:data属性传入表格数据。每一列通过el-table-column组件定义，prop属性指定了该列对应数据对象的属性名，label属性则定义了表头的显示文本。
二、Table组件的功能特性
Element UI的Table组件提供了丰富的功能特性，以满足不同场景下的需求。
2.1 排序
Table组件支持对表格数据进行排序。只需在el-table-column组件上添加sortable属性，即可开启该列的排序功能：
<el-table-column prop="age" label="年龄" sortable></el-table-column>
2.2 筛选
除了排序，Table组件还支持对表格数据进行筛选。可以通过在el-table-column组件上添加filters和filter-method属性来实现自定义筛选：
<el-table-column prop="age" label="年龄" :filters="[{ text: '20-25', value: [20, 25] }, { text: '25-30', value: [25, 30] }]" filter-method="filterAge" ></el-table-column>
在上面的例子中，我们定义了两个筛选条件：“20-25”和“25-30”。filter-method属性指定了筛选方法，该方法会在筛选时调用，传入两个参数：筛选值和当前行的数据，返回一个布尔值表示该行是否满足筛选条件。
2.3 分页
当表格数据量较大时，通常需要使用分页功能来展示数据。Element UI提供了el-pagination组件来实现分页功能。可以将其与Table组件结合使用，通过监听分页组件的current-change事件来更新Table组件的数据源。
2.4 行操作
Table组件还支持对表格行进行操作，如点击行、选中行等。可以通过在el-table组件上添加@row-click、@select等事件监听来实现行操作的功能。
三、Table组件的优化技巧
在使用Table组件时，可能会遇到一些性能问题，尤其是在处理大量数据时。下面介绍一些优化技巧，以提高Table组件的性能。
3.1 虚拟滚动
当表格数据量非常大时，一次性渲染所有数据可能会导致页面卡顿。此时可以使用虚拟滚动技术来优化性能。Element UI的Table组件本身不直接支持虚拟滚动，但可以通过结合第三方库（如vue-virtual-scroller）来实现。
3.2 懒加载数据
另一种优化技巧是懒加载数据。即只在用户需要时才加载数据，而不是一次性加载所有数据。可以通过监听分页组件的current-change事件来实现懒加载功能。
3.3 减少不必要的渲染
在Vue中，使用v-if可以控制组件的渲染。当表格中的某些列不是始终需要显示时，可以使用v-if来控制其渲染，以减少不必要的性能开销。
四、封装Table和Pagination分页组件
一、模版部分：
1. 当窗口大小发生变化时，表格的高度也发生变化，让内容始终充满全屏，这个是我自己的喜好 :height=“screen.height - tableHeightY” 组件el-table上的这个属性就代表这个意思。
2. v-loading=“loading” 表示当数据变化时，出现loading效果。
<template> <div> <el-table :data="tableData" :height="screen.height - tableHeightY" style="width: 100%" v-bind="$attrs" v-loading="loading" > <slot></slot> </el-table> <div class="fenye"> <el-pagination background @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[15, 20, 30,40]" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total" > </el-pagination> </div> </div> </template>
需要的状态：
props: { //table高度差 tableHeightY: { type: Number, default: 0, }, //数据 tableData: { required: true }, //当前页 currentPage: { required: true, type: Number, default: 1, }, //总数 total: { required: true, type: Number, default: 0, }, pageSize: { type: Number, default: 20, }, }, data() { //这里存放数据 return { //窗口大小 screen: { height: window.innerHeight, width: window.innerWidth, }, loading: true, } },
当窗口变化时给screen赋值，使得table高度响应式变化；之前我是在app的最外层监听窗口变化，在需要的地方注入就可以。考虑到我们要做一个单组件，就不去依赖过多的没必要的东西了。
mounted() {//生命周期 - 挂载完成（可以访问DOM元素） window.onresize = () => { return (() => { this.screen.height = window.innerHeight; this.screen.width = window.innerWidth; })(); }; },
监听table中数据的变化，数据变了，加载动画就结束
watch: { // whenever question changes, this function will run tableData(newData, oldData) { this.loading = false; } },
暴露一个当前页改变时的事件
handleCurrentChange(val) { console.log(`当前页: ${val}`); this.loading = true; this.$emit("currentChange", val) },
好了，大功告成，如果帮助到了您，快点赞关注吧！
