将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起（Vue实战系列）_elementui table

在前端开发中，表格（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
1
2
3

然后在项目中引入Element UI库和样式：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
1
2
3
4
5

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在上面的例子中，我们创建了一个包含姓名和年龄两列的表格，并通过: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>
1

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>
1
2
3
4
5
6

在上面的例子中，我们定义了两个筛选条件：“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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

需要的状态：

  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,
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

当窗口变化时给screen赋值，使得table高度响应式变化；之前我是在app的最外层监听窗口变化，在需要的地方注入就可以。考虑到我们要做一个单组件，就不去依赖过多的没必要的东西了。

mounted() {//生命周期 - 挂载完成（可以访问DOM元素）
    window.onresize = () => {
      return (() => {
        this.screen.height = window.innerHeight;
        this.screen.width = window.innerWidth;
      })();
    };
  },
1
2
3
4
5
6
7
8

监听table中数据的变化，数据变了，加载动画就结束

watch: {
    // whenever question changes, this function will run
    tableData(newData, oldData) {
      this.loading = false;
    }
  },
1
2
3
4
5
6

暴露一个当前页改变时的事件

handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.loading = true;
      this.$emit("currentChange", val)
    },
1
2
3
4
5

好了，大功告成，如果帮助到了您，快点赞关注吧！