基于 Vue3 + Element-plus 封装的 Table 组件

12月

本文最后更新于2024年03月26日，已经过了123天没有更新，若内容或图片失效，请留言反馈

项目信息

项目名称：vue3-xmw-table
预览地址：点击预览
Github：vue3-element-table

使用方法

根目录下执行 npm i vue3-xmw-table 命令
POWERSHELL 代码:
```
npm i vue3-xmw-table
```

全局挂载组件

JAVASCRIPT 代码:

import { createApp } from 'vue'
import App from './App.vue'
import Xmwtable from 'vue3-xmw-table'

createApp(App).use(Xmwtable).mount('#app')

在页面上使用

HTML 代码:

 <!-- template -->
 <vue3-xmw-table
  stripe
  border
  show-summary
  :summary-method="getSummaries"
  :tableData="state.tableData"
  :loading="state.loading"
  :columns="state.tableColumns"
  :tableConfig="tableConfig"
  :showPagination="false"
>
  <template v-slot:handler="{ scope }">
    <el-button
      size="small"
      type="primary"
      >编辑</el-button
    >
    <el-button
      type="danger"
      size="small"
      >删除</el-button
    >
  </template>
</vue3-xmw-table>

Table 属性

除此之外支持所有 el-table属性

参数	说明	类型	默认值
tableData	表格数据	Array	-
columns	列配置,详情见下方 Column 属性	Array	-
loading	加载状态	Boolean	false
tableConfig	表格配置项，详情见下方 Config 属性	Object	-
showPagination	是否显示分页	Boolean	true
paginationConfig	分页器配置项	Object	-

Column 属性

除此之外支持所有 el-table-column属性

参数	说明	类型	默认值
slotName	开启 slot 支持，用于自定义列	Boolean	false

tableConfig 配置项

除此之外支持所有 el-table属性

参数	说明	类型	默认值
rowKey	行数据的 Key	Function(row)/String	--
showSeletion	是否支持多选	Boolean	false
showIndexColumn	是否显示序号列	Boolean	false
indexLabel	自定义索引名	String	序号
isCheckMemory	是否需要跨页勾选	Boolean	false
showHandler	是否显示操作列	Boolean	false
showExpand	是否是展开行	Boolean	false
showAppend	插入至表格最后一行之后	Boolean	false
appendLabel	自定义默认内容	String	自定义
handlerConfig	操作列配置	Object	{ label: "操作", minWidth: 80, fixed: "right" }

Page 配置项

除此之外支持所有 el-pagination 配置项

参数	说明	类型	默认值
total	条目数	number	0
current	当前页数	number	1
pageSize	每页显示条目个数	number	10
pageSizes	分页选项设置	Array	[10, 20, 30, 50]
layout	组件布局	String	"total, sizes, prev, pager, next, jumper"

Slot 插槽

name	说明	参数
multiSelectMenu	多选显示顶部操作栏	{ row, column, $index }
handler	自定义操作栏的内容	{ row, column, $index }
expand	自定义展开行内容	{ row, column, $index }
append	自定义默认内容	{ row, column, $index }