# Vue3ElementplusComponents

**Repository Path**: goal_22/vue3-elementplus-components

## Basic Information

- **Project Name**: Vue3ElementplusComponents
- **Description**: 使用Vue3.0和Elementplus二次封装的常用组件
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2023-11-15
- **Last Updated**: 2025-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## SelectTable

**表格列对象类型定义，传值时需传递以下属性**

```tsx
interface Field {
  prop: string; //与tableData需要显示的值对应
  label: string;
  width: number;
  showTooltip?: boolean;
}
```

### 属性值

| 属性(加粗为必填) | 类型          | 默认值            | 描述                                                                                                               |
| ---------------- | ------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------ |
| **data**         | object/string |                   | 双向绑定数据                                                                                                       |
| **fields**       | Field[]       |                   | 表格列对象                                                                                                         |
| **tableData**    | object[]      |                   | 表格数据对象                                                                                                       |
| value            | string        |                   | 双向绑定数据的值(为空时 data 属性为表格当前行数据对象)                                                             |
| label            | string        |                   | 选择框显示的文本内容(为空时分别查看 value 和 objKey 是否为空,若 value 和 objKey 都有值,则 value 优先级大于 objKey) |
| objKey           | string        |                   | 对象 key(绑定值的唯一标识，绑定值为对象时必填)                                                                     |
| placeholder      | string        |                   | 选择框占位文本                                                                                                     |
| size             | string        | default           | 组件大小                                                                                                           |
| border           | boolean       | false             | 表格是否带有边框                                                                                                   |
| clearable        | boolean       |                   | 下拉框是否可清空                                                                                                   |
| curPage          | number        |                   | 表格分页当前页(当 curPage，pageSize，total 三个属性同时配置时才会开启分页)                                         |
| pageSize         | number        |                   | 表格分页每页总数                                                                                                   |
| total            | number        | 0                 | 表格总行数                                                                                                         |
| pageBackground   | boolean       | false             | 分页按钮是否添加背景                                                                                               |
| pageLayout       | string        | prev, pager, next | 分页按钮布局(参考 elementplus)                                                                                     |
| hideOnSinglePage | boolean       | false             | 在只有一页时是否隐藏分页                                                                                           |
| editable         | boolean       | false             | 下拉框是否可输入                                                                                                   |

### 事件

| 事件名        | 参数   | 描述                                     |
| ------------- | ------ | ---------------------------------------- |
| sizeChange    | number | 分页切换每页大小时触发                   |
| currentChange | number | 分页切换页数时触发                       |
| inputChange   | string | 开启下拉框可编辑后，输入框内容变化时触发 |