Vue 3 组件文档

InformationTable 组件

描述

InformationTable 组件是一个基于 Vue 3 的表格组件，用于展示具有各种功能的表格数据，例如排序、分页和右键上下文菜单。该组件利用了 VXE-Table 库提供表格功能。

Props

• dataSource (Array<Object>): 表格的数据源。
• columns (Array<Object>): 表格列的配置。
• pageSize (Number): 每页显示的项数。
• total (Number): 记录的总数。
• isHidePagination (Boolean): 是否隐藏分页控件。
• isChecked (Boolean): 是否显示多选复选框。
• isSort (Boolean): 是否启用排序。
• id (String): 用于唯一标识每一行的键字段。
• showDarg (Boolean/String): 已弃用。用于显示/隐藏拖拽功能。
• isDrag (Boolean/String): 是否启用拖拽功能。
• autoHeight (Boolean): 是否自动调整表格高度。
• isVScroll (Boolean): 是否启用虚拟滚动。
• border (String/Any): 表格的边框样式。
• url (String): 用于获取数据的 API 端点。
• isFooter (Boolean): 是否显示带有添加按钮的页脚。
• contextMenu (Array): 右键上下文菜单的配置。
• rowConfig (Any): 表格行的附加配置。
• size (String): 表格的大小（'small'、'mini' 或默认）。

Events

• check(records: Array): 当选择复选框时触发。
• sort(...args: Any): 当排序更改时触发。
• page(currentPage: Number): 当当前页更改时触发。
• rowClick(row: Object): 当点击行时触发。
• update:dataSource(data: Array): 当数据源更新时触发。
• clickFooter(): 当点击页脚添加按钮时触发。

Methods

• setSelectRow(keys: Array, checked: Boolean): 根据键设置选定的行。
• setRow(row: Object): 设置当前行。
• clearSelectEvent(): 清除所有选定的行。

使用

<template>
  <InformationTable
    :dataSource="yourDataSource"
    :columns="yourColumns"
    :pageSize="10"
    :total="yourTotalRecords"
    :isChecked="true"
    :isSort="true"
    :id="'id'"
    :isDrag="true"
    :autoHeight="true"
    :isVScroll="true"
    :border="'1px solid #e3e6ed'"
    :url="'your/api/endpoint'"
    :isFooter="true"
    :contextMenu="yourContextMenuConfig"
    :rowConfig="yourRowConfig"
    :size="'small'"
    @check="handleCheck"
    @sort="handleSort"
    @page="handlePage"
    @rowClick="handleRowClick"
    @update:dataSource="handleUpdateDataSource"
    @clickFooter="handleClickFooter"
  />
</template>

<script>
import InformationTable from 'path/to/InformationTable.vue'

export default {
  components: {
    InformationTable,
  },
}
</script>

注意事项

• 这是一个基本的概述文档。根据你的具体要求进行定制和扩展。
• 确保 VXE-Table 库已正确安装和配置在你的项目中。
• 根据设计偏好可能需要额外的样式设置。