You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
2.0 KiB
63 lines
2.0 KiB
# 二次封装的element-ui组件
|
|
|
|
这些组件位于 `@/component/abstract` 下，均为函数式组件，无特殊声明时与原始的 `element-ui` 组件没有区别。
|
|
|
|
## Dialog
|
|
|
|
位于 `@/component/abstract/Dialog/index.vue`。
|
|
|
|
可拖拽，超出滚动（使用 `el-scrollbar`），使用 `value`（支持 `v-model`） 代替 `visible`，新增了 `loading` 属性。
|
|
|
|
## Form
|
|
|
|
位于 `@/component/abstract/Form`。
|
|
|
|
对 `el-form` 和 `el-form-item` 做了默认封装（`index.vue` 和 `item.vue`），使用 `el-row` 和 `el-col` 包裹。
|
|
|
|
用法：
|
|
```vue
|
|
<abstract-form :model="model" :rules="rules">
|
|
<abstract-form-item label="xxx" prop="xxx">
|
|
<el-input/>
|
|
</abstract-form-item>
|
|
</abstract-form>
|
|
```
|
|
|
|
`abstract-form` 的其他用法与 `el-form` 没有区别，`abstract-form-item` 参数如下：
|
|
|
|
| 名称 | 说明 | 类型 | 默认值 |
|
|
|:-----:|:--------------------------------------:|:-------:|:------:|
|
|
| full | 为 `true` 时，将占满一行 | Boolean | - |
|
|
| thin | 为 `true` 时，屏幕宽度>=1200px下占12列 | Boolean | - |
|
|
| label | 等同于 `el-form-item` 的 `label` | String | - |
|
|
| prop | 等同于 `el-form-item` 的 `prop` | String | - |
|
|
|
|
::: tip 注意
|
|
当 `abstract-form-item` 的 `full` 为 `true` 时，可以认为是 `el-form-item` 的子集
|
|
:::
|
|
|
|
## Pagination
|
|
|
|
位于 `@/component/abstract/Pagination/index.vue`。
|
|
|
|
设置了一些默认属性，与 `el-pagination` 的区别是增加了 `model` 属性，
|
|
`model` 是一个 `{total, page, pageSize}` 对象，对应 `el-pagination` 的 `total`、`current-page`、`page-size` 属性
|
|
|
|
## Table
|
|
|
|
位于 `@/component/abstract/Table/index.vue`。
|
|
|
|
给 `<el-table>` 设置了一些默认属性，设置了 `empty` 插槽（位于 `@/component/Empty`）。
|
|
```html
|
|
<el-table
|
|
ref="table"
|
|
current-row-key="id"
|
|
row-key="id"
|
|
highlight-current-row
|
|
{...data}
|
|
>
|
|
{children}
|
|
<Empty slot="empty"/>
|
|
</el-table>
|
|
```
|
|
|
|
|