Eelment UI 表格头部添加图标，使用后端排序，实战体验与痛点解决

前端

2024-01-09 02:49:39

Element UI 表格头部添加图标，使用后端排序

Eelment UI 自带的表格功能已经使用了很久，复制粘贴很爽。

Eelment UI 自带的表格功能已经使用了很久，一直觉的复制粘贴很爽。今天就遇到了几个问题，然后开始查看官方文档，终于搞定之后，写个文章记录一下。

背景

Element UI 是一款功能强大的前端 UI 框架，其中包含了丰富的表格组件，可以帮助开发者轻松构建出各种样式的表格。Element UI 的表格组件提供了多种自定义选项，允许开发者根据自己的需求对表格进行个性化设置。

需求

在实际项目开发中，我们经常需要在表格的头部添加图标，以便直观地表示该列的数据类型或排序状态。同时，我们还希望能够通过单击表头图标来对表格数据进行排序。

实现

1. 添加图标

为了在表格头部添加图标，我们可以使用 Element UI 的 header-cell 插槽。header-cell 插槽允许我们在表头单元格中插入自定义的内容，例如图标、文本或按钮。

<el-table>
  <el-table-column
    prop="name"
    label="姓名"
    header-cell="icon"
  >
    <template slot="icon">
      <i class="el-icon-user"></i>
    </template>
  </el-table-column>
</el-table>

在上面的代码中，我们在 header-cell 插槽中插入了一个 <i> 元素，并为其添加了 el-icon-user 类名。这样，当表格渲染时，表头单元格中就会显示一个用户图标。

2. 实现后端排序

为了实现后端排序，我们需要在前端代码中发送请求到后端服务器，并根据服务器返回的数据对表格数据进行排序。

methods: {
  sortData(prop, order) {
    this.$axios.get(`/api/sort?prop=${prop}&order=${order}`)
      .then(response => {
        this.tableData = response.data.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
}

在上面的代码中，我们定义了一个 sortData() 方法，该方法接受两个参数：prop 和 order。prop 参数表示要排序的字段，order 参数表示排序顺序（ascending 或 descending）。

当用户单击表头图标时，我们调用 sortData() 方法，并将表头单元格的 prop 和 order 属性作为参数传递给该方法。sortData() 方法会向后端服务器发送一个请求，请求的 URL 包含了 prop 和 order 参数。后端服务器收到请求后，会根据 prop 和 order 参数对数据进行排序，并将排序后的数据返回给前端。

前端收到后端返回的数据后，会将数据更新到 tableData 属性中。这样，表格就会根据用户选择的排序条件重新渲染。