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 |
# Search Form |
||||||
|
|
||||||
一个自适应的表单容器，根据父元素的内宽来确定一行渲染多少个表单控件，同时确定是否需要折叠。 |
一个自适应的搜索表单，模仿ant-design-pro，根据父元素的内宽来确定一行渲染多少个表单控件，同时确定是否需要折叠。 |
||||||
|
|
||||||
<img :src="$withBase('/search-form_1.png')"> |
<img :src="$withBase('/search-form_1.png')"> |
||||||
<img :src="$withBase('/search-form_2.png')"> |
<img :src="$withBase('/search-form_2.png')"> |
||||||
|
|
||||||
### 引入： |
### 引入： |
||||||
|
|
||||||
`@/component/SearchForm`，`@/component/SearchFormItem` |
`@/component/SearchForm` |
||||||
|
|
||||||
### 使用： |
### 使用： |
||||||
```html |
```html |
||||||
<search-form> |
<search-form v-model="searchForm" @search="search"> |
||||||
<search-form-item label="单 号："> |
<el-form-item label="label1"> |
||||||
<el-input/> |
<el-input/> |
||||||
</search-form-item> |
</el-form-item> |
||||||
<search-form-item label="采购订单："> |
<el-form-item label="label2"> |
||||||
<el-input/> |
<el-input/> |
||||||
</search-form-item> |
</el-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> |
|
||||||
</search-form> |
</search-form> |
||||||
``` |
``` |
||||||
|
|
||||||
### SearchForm Attributes： |
### SearchForm Attributes： |
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认 | |
| 参数 | 说明 | 类型 | 默认 | |
||||||
| :-----------------: | :----------------------------------: | :------: | :-------: | |
| :---------: | :----------------------------------: | :------: | :-------: | |
||||||
| label-width | 等同于`el-form`的`label-width` | `string` | `'120px'` | |
| model | 表单数据，支持v-model，用于重置表单 | `object` | - | |
||||||
| xs | 父元素内宽<768px时，每行渲染多少空间 | `number` | `1` | |
| label-width | 等同于 `el-form` 的 `label-width` | `string` | `'120px'` | |
||||||
| sm | >=768px | `number` | `2` | |
| xs | 父元素内宽<768px时，每行渲染多少空间 | `number` | `1` | |
||||||
| md | >=998px | `number` | `3` | |
| sm | >=768px | `number` | `2` | |
||||||
| lg | >=1200px | `number` | `4` | |
| md | >=998px | `number` | `3` | |
||||||
|
| lg | >=1200px | `number` | `4` | |
||||||
### SearchForm Slots： |
|
||||||
|
### SearchForm Events： |
||||||
| 名称 | 说明 | |
|
||||||
| :------: | :---------------------------------------------------------------------: | |
| 名称 | 说明 | |
||||||
| collapse | 折叠按钮，参数为 `{collapse:展开为true否则false,handle:展开折叠的方法}` | |
| :----: | :--------------------------------: | |
||||||
|
| search | 点击查询按钮触发 | |
||||||
### SearchFormItem Attributes： |
| reset | 点击重置按钮触发，参数为表单初始值 | |
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认 | |
::: tip 注意 |
||||||
| :---: | :---------------------------: | :------: | :-------: | |
`<search-form>` 算是对 `<el-form>` 的封装，其 `label-suffix` 属性为`':'`， |
||||||
| label | 等同于`el-form-item`的`label` | `string` | - | |
也就是说 `<search-form>` 下的所有 `<el-form-item>` 项的label后缀为`':'` |
||||||
|
::: |
||||||
|
|||||||
@ -1,8 +1,7 @@ |
|||||||
# mock |
# mock |
||||||
|
|
||||||
如果不想依赖后端的话，需要将 `@/config` 中的 `useMock` 设为true， |
如果不想依赖后端的话，需要将 `@/config` 中的 `useMock` 设为true， |
||||||
同时在 `@/mock/controller` 里写对应的处理路由，项目中预先写了三个 |
同时在 `@/mock/controller` 里写对应的处理路由，项目中预先写了三个基础的路由， |
||||||
基础的路由，可以让你进行 *登陆-登出* 的基础操作，可以照着代码自行扩展。 |
可以让你进行 *登陆-登出* 的基础操作，可以照着代码自行扩展。 |
||||||
|
|
||||||
目前mock和代理不能共存，如果真想要这个功能的话，需要自己在`vue.config.js` |
目前mock和代理不能共存，如果真想要这个功能的话，需要自己在`vue.config.js` 中的 `devServer.proxy` 设置拦截路径。 |
||||||
中的 `devServer.proxy` 设置拦截路径。 |
|
||||||
|
|||||||
Loading…
Reference in new issue