toesbieya
6 years ago
parent
5030e3db57
commit
7532c837a1
|
Before Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 4.3 KiB |
@ -1,26 +0,0 @@ |
||||
# Abstract Table |
||||
|
||||
<img :src="$withBase('/abstract-table.png')"> |
||||
|
||||
给`<el-table>`设置了一些默认属性，设置了`empty`插槽。 |
||||
```html |
||||
<el-table |
||||
ref="table" |
||||
current-row-key="id" |
||||
row-key="id" |
||||
highlight-current-row |
||||
{...data} |
||||
> |
||||
{children} |
||||
<Empty slot="empty"/> |
||||
</el-table> |
||||
``` |
||||
|
||||
### 引入： |
||||
|
||||
`@/component/AbstractTable`。 |
||||
|
||||
### 使用： |
||||
|
||||
照着官方文档，当成 `<el-table>` 用就行。 |
||||
|
||||
@ -0,0 +1,63 @@ |
||||
# 二次封装的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> |
||||
``` |
||||
|
||||
@ -1,59 +1,45 @@ |
||||
# Search Form |
||||
|
||||
一个自适应的表单容器，根据父元素的内宽来确定一行渲染多少个表单控件，同时确定是否需要折叠。 |
||||
一个自适应的搜索表单，模仿ant-design-pro，根据父元素的内宽来确定一行渲染多少个表单控件，同时确定是否需要折叠。 |
||||
|
||||
<img :src="$withBase('/search-form_1.png')"> |
||||
<img :src="$withBase('/search-form_2.png')"> |
||||
|
||||
### 引入： |
||||
|
||||
`@/component/SearchForm`，`@/component/SearchFormItem` |
||||
`@/component/SearchForm` |
||||
|
||||
### 使用： |
||||
```html |
||||
<search-form> |
||||
<search-form-item label="单 号："> |
||||
<search-form v-model="searchForm" @search="search"> |
||||
<el-form-item label="label1"> |
||||
<el-input/> |
||||
</search-form-item> |
||||
<search-form-item label="采购订单："> |
||||
</el-form-item> |
||||
<el-form-item label="label2"> |
||||
<el-input/> |
||||
</search-form-item> |
||||
<search-form-item label="创建人："> |
||||
<el-input/> |
||||
</search-form-item> |
||||
<search-form-item label="创建时间："> |
||||
<el-date-picker/> |
||||
</search-form-item> |
||||
<search-form-item label="审核人："> |
||||
<el-input/> |
||||
</search-form-item> |
||||
<search-form-item label="审核时间："> |
||||
<el-date-picker/> |
||||
</search-form-item> |
||||
<search-form-item label="状 态："> |
||||
<el-select/> |
||||
</search-form-item> |
||||
</el-form-item> |
||||
</search-form> |
||||
``` |
||||
|
||||
### SearchForm Attributes： |
||||
|
||||
| 参数 | 说明 | 类型 | 默认 | |
||||
| :-----------------: | :----------------------------------: | :------: | :-------: | |
||||
| :---------: | :----------------------------------: | :------: | :-------: | |
||||
| model | 表单数据，支持v-model，用于重置表单 | `object` | - | |
||||
| label-width | 等同于 `el-form` 的 `label-width` | `string` | `'120px'` | |
||||
| xs | 父元素内宽<768px时，每行渲染多少空间 | `number` | `1` | |
||||
| sm | >=768px | `number` | `2` | |
||||
| md | >=998px | `number` | `3` | |
||||
| lg | >=1200px | `number` | `4` | |
||||
|
||||
### SearchForm Slots： |
||||
### SearchForm Events： |
||||
|
||||
| 名称 | 说明 | |
||||
| :------: | :---------------------------------------------------------------------: | |
||||
| collapse | 折叠按钮，参数为 `{collapse:展开为true否则false,handle:展开折叠的方法}` | |
||||
|
||||
### SearchFormItem Attributes： |
||||
|
||||
| 参数 | 说明 | 类型 | 默认 | |
||||
| :---: | :---------------------------: | :------: | :-------: | |
||||
| label | 等同于`el-form-item`的`label` | `string` | - | |
||||
| :----: | :--------------------------------: | |
||||
| search | 点击查询按钮触发 | |
||||
| reset | 点击重置按钮触发，参数为表单初始值 | |
||||
|
||||
::: tip 注意 |
||||
`<search-form>` 算是对 `<el-form>` 的封装，其 `label-suffix` 属性为`':'`， |
||||
也就是说 `<search-form>` 下的所有 `<el-form-item>` 项的label后缀为`':'` |
||||
::: |
||||
|
||||
@ -1,8 +1,7 @@ |
||||
# mock |
||||
|
||||
如果不想依赖后端的话，需要将 `@/config` 中的 `useMock` 设为true， |
||||
同时在 `@/mock/controller` 里写对应的处理路由，项目中预先写了三个 |
||||
基础的路由，可以让你进行 *登陆-登出* 的基础操作，可以照着代码自行扩展。 |
||||
同时在 `@/mock/controller` 里写对应的处理路由，项目中预先写了三个基础的路由， |
||||
可以让你进行 *登陆-登出* 的基础操作，可以照着代码自行扩展。 |
||||
|
||||
目前mock和代理不能共存，如果真想要这个功能的话，需要自己在`vue.config.js` |
||||
中的 `devServer.proxy` 设置拦截路径。 |
||||
目前mock和代理不能共存，如果真想要这个功能的话，需要自己在`vue.config.js` 中的 `devServer.proxy` 设置拦截路径。 |
||||
|
||||
Loading…
Reference in new issue