封面图加载中

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

这篇文章介绍了基于Vue3和Element-plus封装的Table组件，包含项目的基本使用方法、参数说明及功能扩展。用户可以通过npm安装并全局注册组件，在页面中通过属性绑定表格数据、列配置、加载状态等，并支持自定义列和禁用分页等功能。此外，还详细列举了关键参数及其类型、默认值等信息。
  • 本文作者
  • 文章发布日期 2023-12-01 17:53
  • 热度 48
  • 本文共计
  • 预计阅读

项目信息

使用方法

  1. 根目录下执行 npm i vue3-xmw-table 命令

npm i vue3-xmw-table

  1. 全局挂载组件

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

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

  1. 在页面上使用

<!-- 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

分页器配置项，详情见下方 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

Events 事件

除此之外支持所有 el-table事件

注： 因为添加了跨分页多选的功能，selection-change 会在切换分页设置勾选状态时调用多次

事件名称

说明

参数

current-page-change

currentPage 改变时会触发

当前页

page-size-change

pageSize 改变时会触发

每页条数

此项目不再维护，如需学习或者使用，可以把源码拷贝到本地进行拓展。