222

schangxiang@126.com

2025-05-06 928c61ccddebc8d2c697b86ee9bee0c207330a8c

 HIAWms/web/src/components/Table/Readme.md

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,90 @@
# 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()**: æ¸…除所有选定的行。

### ä½¿ç”¨

```vue
<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 åº“已正确安装和配置在你的项目中。
- æ ¹æ®è®¾è®¡åå¥½å¯èƒ½éœ€è¦é¢å¤–的样式设置。