JavaWeb——Vue组件库Element（2/6）：常见组件：Table表格、Pagination分页（介绍，属性，事件）

news2024/9/28 13:25:48

常见组件-表格

介绍

属性

常见组件-分页

介绍

属性

事件

了解完了 Element 的快速入门程序之后，接下来要了解 Element 当中所提供的一些常见组件。对于 Element 当中常见组件的学习非常简单，基本上就是 Ctrl+C 复制、Ctrl+V 粘贴的过程。学习每一个组件，只需参照 Element 的官方网站，找到对应的组件，查看组件的源代码，把源代码直接复制到 VS Code 的页面中，做一些简单调整，改成想要的样子。

常见组件-表格

介绍

首先讲解第一个常见组件——表格。表格用于展示数据，Element 提供了各式各样的表格，这些表格可以对其中的数据进行排序、筛选、对比等一系列操作。

Table表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

打开 Element 的官方网站，找到“表格”这个组件，在左侧菜单栏找到“Table 表格”组件并点击。点击打开后，能看到各种各样的表格，有基础表格、带斑马纹的表格、带边框的表格、带状态的表格、固定表头的表格、固定列的表格等。

这里选择一个相对简单的带边框的表格为例。要使用的话，直接点击下面的“显示源代码”，点击后能看到表格的源代码。template 当中定义的就是 HTML 当中的一些标签，Element 所提供的组件都是以“el”开头，“el-table”代表的就是一个表格组件。

还需要复制源码当中定义的数据模型“data”，直接把数据模型当中这一块的内容复制过来，放在对象里声明一个数据模型，这样就在 Vue 当中定义了这样一个数据模型。

<template>
  <div>
    <!-- Table 表格组件 -->
    <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>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
</script>
<style>
</style>

运行结果为：

属性

回过头来看复制过来的代码，复制过来了“el-table”标签，里面有属性“data”、“border”、“style”。如果不清楚这些属性的含义，可以直接打开 Element 的官网往下找，每个组件的最下面展示了组件的属性和方法。

“data”属性代表要显示的数据，数据类型是一个数组，所以“data”指代表格所要展示的数据，就是下面定义的数组对象，数组里是一个一个的 JavaScript 对象。
“border”代表是否带有纵向边框
“style”用来设置样式
...

下面定义了三个“el-table-column”标签，每个代表一列，有一个重要属性“prop”，代表这一列要展示对象当中的哪一个属性，比如第一列展示“data”属性，第二列展示“name”属性，第三列展示“address”属性，“label”指的是表头的名称。

常见组件-分页

介绍

介绍了表格组件之后，接下来介绍一个经常与表格结合在一起使用的组件——Pagination 分页组件。当表格的数据量过多时，一般会使用分页组件来分解数据，让数据一页一页展示出来。在很多网站，比如后台管理系统中都能见到分页条。

Pagination 分页：当数据量过多时，使用分页分解数据。

直接打开 Element 的官网找到分页组件，选择带有背景颜色的分页组件看效果，点击“显示代码”，把代码选中在 VS Code 中粘贴，

<template>
  <div>
    <!-- Table 表格组件 -->
    <el-table :data="tableData" style="width: 50%">
      <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>

    <!-- Pagination 分页组件 -->
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
</script>
<style>
</style>

然后打开浏览器，在表格下面展示了分页条。

属性

接下来看复制进来的分页组件加了哪些属性，第一个“background”，从属性名能看出跟背景有关，具体含义不清楚直接往下找对应的属性，

“background”代表是否为分页按钮添加背景颜色。
第二个属性“layout”，“layout”指代组件的布局，子组件名用逗号分隔，可选值有“size”、“prev”、“pager”、“next”、“jumper”、“total”。

我们一个个测试，现在布局有“prev”“pager”“next”，接下来在前面加上“size”，后面加上逗号，再跟上“jumper”、“total”，打开浏览器，

前面加上了每页展示条数的选项，有上一页按钮、下一页按钮、页码、跳转多少页和总条数。

可以结合“layout”布局控制组件名字，从而控制各个组件排列的先后顺序，比如把总记录数放在第一位，直接把“total”移到最前面。

事件

介绍完 Pagination 分页组件当中的基本属性以后，还需要介绍一下这个分页组件当中的两个事件。把官方文档往下拉，看到下面有“event”，代表组件当中的事件，

主要介绍前两个事件，一个是“size-change”，代表每页展示记录数发生变化的时候触发，还有一个是“current-change”，代表当前页码发生变化的时候触发。

参照官方文档的写法，在附加功能点击“显示代码”，复制两个事件在 VS Code 的组件中粘贴换行。

定义了两个事件“size-change”和“current-change”。既然需要调用 Vue 当中的方法，就需要在下面定义这两个方法，编写与“data”平齐，在下面声明一个“methods”，“methods”当中定义方法，需要定义两个方法“handleSizeChange”和“handleCurrentChange”，两个方法之间加上逗号，再定义一个 function 函数。

这两个方法是可以接收参数的，在官方文档中有说明，“size-change”接收的参数是每页条数，“current-change”接收的参数是当前访问的页码。在这里接收一个参数叫“val”，然后用“alert”弹出警告框，输出相关提示。

调整代码，

<template>
  <div>
    <!-- Table 表格组件 -->
    <el-table :data="tableData" style="width: 50%">
      <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>

    <!-- Pagination 分页组件 -->
    <el-pagination
      background
      layout="sizes,prev, pager, next,jumper,total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="1000"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    handleSizeChange:function(val) {
      alert(`每页 ${val} 条`);
    },
    //可以直接省略function
    handleCurrentChange(val) {
      alert(`当前页: ${val}`);
    },
  },
};
</script>
<style>
</style>

然后再打开浏览器测试：