vue3-pro-table:一个基于ElementPlus封装的table列表页组件，将包含搜索、列表、分页等功能的页面封装成...

# vue3-pro-table > 之前有一个[vue-pro-table](https://github.com/huzhushan/vue-pro-table)是基于 vue2 开发的 > vue3-pro-table 是基于 vue3 开发 一个基于 ElementPlus 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件 ## 特性 - 将搜索、列表、分页三者的交互逻辑封装到组件中，节省开发者代码量 - 配置化的请求函数，自动发送请求，自动获取请求参数，自动显示 loading 效果 - 配置化的表格项，跟 el-table-column 的配置属性类似 - 配置化的搜索表单，支持大部分表单元素 - 配置化的分页，跟 el-pagination 的配置属性类似 - 自定义是否显示搜索和分页 - 自定义标题栏和工具栏 - 丰富的插槽提供功能扩展 ## 使用 ### 安装和引入 安装 ```js // npm npm install vue3-pro-table // yarn yarn add vue3-pro-table ``` 引入 > 该组件依赖 element-plus，需要自行引入 > > ```js > // 引入element-plus > import ElementPlus from "element-plus"; > import "element-plus/lib/theme-chalk/index.css"; > // 引入中文语言包 > import "dayjs/locale/zh-cn"; > import locale from "element-plus/lib/locale/lang/zh-cn"; > app.use(ElementPlus, { locale }); > ``` ```js // 引入vue-pro-table import Vue3ProTable from "vue3-pro-table"; app.use(Vue3ProTable); ``` ### 快速使用 ```vue <template> <vue3-pro-table title="列表" :request="getList" :columns="columns"> <template #operate="scope"> <el-button size="mini" type="primary">编辑</el-button> <el-button size="mini" type="danger">删除</el-button> </template> </vue3-pro-table> </template> <script> import { defineComponent, reactive, ref, toRefs } from "vue"; import { getUserList } from "src/api/xxx"; export default defineComponent({ setup() { const state = reactive({ // 表格列配置，大部分属性跟el-table-column配置一样 columns: [ { label: "序号", type: "index" }, { label: "名称", prop: "nickName", width: 180 }, { label: "邮箱", prop: "userEmail" }, { label: "操作", fixed: "right", width: 180, align: "center", tdSlot: "operate", // 自定义单元格内容的插槽名称 }, ], }); // 请求函数 const getList = async (params) => { // params是从组件接收的，包含分页和搜索字段。 const { data } = await getUserList(params); // 必须要返回一个对象，包含data数组和total总数 return { data: data.list, total: +data.total, }; }; return { ...toRefs(state), getList, }; }, }); </script> ``` 预览效果 > 默认不包含搜索表单  ### 请求函数配置 - request，请求列表数据的函数 > 组件加载的时候会自动执行 request 函数，并在加载过程中显示 loading 效果 - 函数接收参数：包含搜索表单的所有字段和分页的 pageNum 和 pageSize - 函数必须返回一个对象，包含: - data: 列表数据的数组 - total：总数，用于分页 ### 表格配置 - border 表格是否有边框。布尔值，默认为 false - columns 属性的配置，是一个数组 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------- | ------------------------------------------------------------------------------------------- | ---------------------- | ---------------------- | ------ | | label | 对应 el-table-column 的 label | string | - | - | | type | 对应 el-table-column 的 type | string | selection/index/expand | - | | prop | 对应 el-table-column 的 prop | string | - | - | | width | 对应 el-table-column 的 width | string,number | - | - | | minWidth | 对应 el-table-column 的 min-width | string,number | - | - | | align | 对应 el-table-column 的 align | string | left/center/right | left | | fixed | 对应 el-table-column 的 fixed | string, boolean | true, left, right | - | | sortable | 对应 el-table-column 的 sortable | boolean | false/true | false | | filters | 对应 el-table-column 的 filters | Array[{ text, value }] | - | - | | tdSlot | 单元格要自定义内容时，可以通过此属性配置一个插槽名称，并且是作用域插槽，可以接收 scope 数据 | string | - | - | | labelSlot | 表头要自定义内容时，可以通过此属性配置一个插槽名称，并且是作用域插槽，可以接收 scope 数据 | string | - | - | - row-key 属性配置 对应 el-table 的 row-key，默认值是'id' ### 搜索配置 - search 属性的配置，是一个对象 > 如果不想显示搜索表单，可以不配置 search 或者 search 设置为 false | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | ----------------------------------------------------------------------------------------- | ----------------- | ------ | ------ | | labelWidth | label 文字长度 | string | - | - | | inputWidth | 表单项长度 | string | - | - | | fields | 表单字段列表，包含 text，select，radio，checkbox，datetime 等类型，所有字段类型配置见下表 | Array[{字段类型}] | - | - | - fields 列表的字段类型配置 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------- | ------ | | type | 字段类型 | string | text,textarea,select,radio,radio-button,checkbox,checkbox-button,number,date,daterange,datetime,dateti