vue3+element-plus 封装列表页，分页，排序，导出

目录

背景描述：

开发流程：

详细开发：

总结：

---

背景描述：

web很多时候，要开发一个列表页，展示大量数据，并且提供一些交互功能，例如排序和分页，导出功能，有时候为了避免麻烦也会封装组件。下面使用 Vue 3 和 Element-Plus 来开发一个列表页。

这里，以一个系统日志的列表页为例。

---

开发流程：

创建一个名为 recordList.vue 的组件，该组件将用于展示系统日志。

一般这种页面都由三部分组成：

1.页面名称

2.搜索框

3.表格和分页

前两部分，往往和其他页面都是固定的样式，复用样式就行，表格和分页的样式也差不多一样，所以整个页面，大部分都是简单的，封装也比较好封装。

如图：

---

 

 

详细开发：

1.子组件——template(搜索组件是我自己封装的一套）

上面涉及的一些样式也都是常见的，控制margin和padding的，没有什么特殊的，根据项目来。

2.子组件——script

4.子组件里的导出功能，有很多种方式，如果后端返回一段base64，那么就可以直接处理，如下面这样： 

 let res = (await axios.post(props.apiUrl, tempParams)).data
  if (res.code == 200) {
    if (download) {
      let b64 = res.data.res
      let a = document.createElement('a')
      a.href = 'data:application/vnd.ms-excel;base64,' + b64
      a.download = `文件名.xlsx`
      a.click()
      ElMessage.success(res.message || '成功！')
      changeButtonLoading(false) //更新父组件里页面的一些数据或者状态
      updateParams() //更新父组件里页面的一些数据或者状态
      return
    }
    tableData.value = res.data.res
    columns.value = res.data.field_list
    params.page = res.page
    params.pageSize = res.pageSize
    pageTotal.value = res.total

    loading.value = false
    updateParams()
  } else {
    ElMessage.error(res.message || '获取表格数据失败！')
    loading.value = false
    changeButtonLoading(false)  //更新父组件里页面的一些数据或者状态
    updateParams() //更新父组件里页面的一些数据或者状态
  }

---

总结：

虽然是简单的业务逻辑，但是封装起来使用更方便，这里是记录这种常见类型的列表页的业务需求实现方式。

还有一篇实现，可以筛选的表格列 的实现方式。