陈裕财
2 years ago
10 changed files with 962 additions and 170 deletions
-
211src/components/mdp-ui/mdp-date-range/README.md
-
130src/components/mdp-ui/mdp-date/README.md
-
18src/components/mdp-ui/mdp-dialog/README.md
-
103src/components/mdp-ui/mdp-field/README.md
-
137src/components/mdp-ui/mdp-input/README.md
-
114src/components/mdp-ui/mdp-number/README.md
-
26src/components/mdp-ui/mdp-select-table/Index.vue
-
207src/components/mdp-ui/mdp-select-table/README.md
-
180src/components/mdp-ui/mdp-table/README.md
-
6src/components/mdp-ui/mixin/MdpTableMixin.js
@ -1,10 +1,126 @@ |
|||
### mdp-date |
|||
## mdp-date |
|||
该组件除了提供origin\tag\x三种样式，其它同element-ui中的el-date一致 |
|||
|
|||
### 用法 |
|||
```js |
|||
var formData={startDate:'',endDate:''} |
|||
##### 一、showStyle |
|||
|
|||
1. `showStyle="origin"` |
|||
|
|||
```vue |
|||
<mdp-date show-style="origin"/> |
|||
``` |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110173240185.png" alt="image-20240110173240185" style="zoom:50%;" /> |
|||
|
|||
2. `showStyle="x"` |
|||
|
|||
```vue |
|||
<mdp-date show-style="x" style="border: 1px solid"> |
|||
<template v-slot:avater><p>★</p></template> |
|||
<template v-slot:info><p>悬浮变回原样</p></template> |
|||
</mdp-date> |
|||
``` |
|||
```html |
|||
<mdp-date v-model="formData.startDate"/> |
|||
``` |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110175355789.png" alt="3" style="zoom:50%;" /> |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110174700696.png" alt="image-20240110174700696" style="zoom:50%;" /> |
|||
|
|||
|
|||
|
|||
|
|||
3. `showStyle="tag"` |
|||
|
|||
```vue |
|||
<mdp-date show-style="tag" style="border: 1px solid"> |
|||
<template v-slot:info><p>悬浮变回原样</p></template> |
|||
</mdp-date> |
|||
``` |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110175435534.png" alt="50" style="zoom:50%;" /> |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110175446637.png" alt="image-20240110175446637" style="zoom:50%;" /> |
|||
|
|||
#### `pickerOptions` |
|||
|
|||
格式：[{ text: '今天', onClick(picker) { picker.$emit('pick', new Date() ); } }] |
|||
|
|||
new Date() 是 选择'今天' 时得到的数据 |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-date/image-20240110183450741.png" alt="image-20240110183450741" style="zoom:40%;" /> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
#### 自定义属性 |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| --------- | ---- | ------ | ------ | ------ | |
|||
| showStyle | | String | — | origin | |
|||
|
|||
|
|||
|
|||
#### elementUI属性 |
|||
|
|||
### Attributes |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| ----------------- | ---------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | |
|||
| value / v-model | 绑定值 | date(DatePicker) / array(DateRangePicker) | — | — | |
|||
| readonly | 完全只读 | boolean | — | false | |
|||
| disabled | 禁用 | boolean | — | false | |
|||
| editable | 文本框可输入 | boolean | — | true | |
|||
| clearable | 是否显示清除按钮 | boolean | — | true | |
|||
| size | 输入框尺寸 | string | large, small, mini | — | |
|||
| placeholder | 非范围选择时的占位内容 | string | — | — | |
|||
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — | |
|||
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — | |
|||
| type | 显示类型 | string | year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange | date | |
|||
| format | 显示在输入框中的格式 | string | 见[日期格式](https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd | |
|||
| align | 对齐方式 | string | left, center, right | left | |
|||
| popper-class | DatePicker 下拉框的类名 | string | — | — | |
|||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | [{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); } }, '昨天', ......] | |
|||
| range-separator | 选择范围时的分隔符 | string | — | '-' | |
|||
| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — | |
|||
| default-time | 范围选择时选中日期所使用的当日内具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 `00:00:00` | — | |
|||
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd HH:mm:ss | |
|||
| name | 原生属性 | string | — | — | |
|||
| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false | |
|||
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date | |
|||
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close | |
|||
| validate-event | 输入时是否触发表单的校验 | boolean | - | true | |
|||
| append-to-body | DetePicker 自身是否插入至 body 元素上。 | boolean | — | true | |
|||
| | | | | | |
|||
| | | | | | |
|||
|
|||
### Picker Options |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| :------------: | :----------------------------------------------------------: | :----------------------------: | :----: | :----: | |
|||
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — | |
|||
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — | |
|||
| cellClassName | 设置日期的 className | Function(Date) | — | — | |
|||
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 | |
|||
| onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — | |
|||
|
|||
### Shortcuts |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| ------- | ------------------------------------------------------------ | -------- | ------ | ------ | |
|||
| text | 标题文本 | string | — | — | |
|||
| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — | |
|||
|
|||
### Events |
|||
|
|||
| 事件名称 | 说明 | 回调参数 | |
|||
| -------- | ----------------------- | ------------------------------------------------------ | |
|||
| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 | |
|||
| blur | 当 input 失去焦点时触发 | 组件实例 | |
|||
| focus | 当 input 获得焦点时触发 | 组件实例 | |
|||
|
|||
### Methods |
|||
|
|||
| 方法名 | 说明 | 参数 | |
|||
| ------ | ----------------- | ---- | |
|||
| focus | 使 input 获取焦点 | — | |
|||
|
|||
@ -0,0 +1,103 @@ |
|||
### mdp-Field |
|||
|
|||
#### 基本用法 |
|||
|
|||
```vue |
|||
<mdp-field show-style="x" :disabled="false" :value="obj" label="" placeholder="占位符" color="#6BC8A2" |
|||
icon="el-icon-goods" size="small" @change="change"> |
|||
</mdp-field> |
|||
``` |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
obj: '' |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
change(currentVal, oldVal) { |
|||
this.obj = currentVal |
|||
}, |
|||
}, |
|||
``` |
|||
|
|||
|
|||
|
|||
#### 自定义 |
|||
|
|||
下列是 mdp-field 的插槽层次结构 |
|||
|
|||
```js |
|||
<slot> |
|||
├── <slot v-if="showStyle=='x'" name="avater"></slot> |
|||
├── <span> |
|||
│ ├── <slot name="info"> |
|||
│ │ ├── <span v-if="showStyle=='x'"> |
|||
│ │ │ ├── <div> |
|||
│ │ │ │ └── <slot name="value"></slot> |
|||
│ │ │ ├── <div> |
|||
│ │ │ │ └── <slot name="label"></slot> |
|||
│ │ │ └── </div> |
|||
│ │ ├── </span> |
|||
│ │ └── <span v-else> |
|||
│ │ └── <div> |
|||
│ │ └── <slot name="value"></slot> |
|||
│ │ </div> |
|||
│ │ </span> |
|||
│ └── </slot> |
|||
│── </span> |
|||
├── <span> |
|||
│ └── <slot name="oper"></slot> |
|||
└── </span> |
|||
</slot> |
|||
``` |
|||
|
|||
例子 |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
obj: '' |
|||
} |
|||
} |
|||
``` |
|||
|
|||
```vue |
|||
<mdp-field show-style="x"> |
|||
<template v-slot:avater> |
|||
<i class="el-icon-s-custom"></i> |
|||
</template> |
|||
<template v-slot:info> |
|||
<el-input placeholder="username" :disabled="true"></el-input> |
|||
</template> |
|||
<template v-slot:oper> |
|||
<el-input v-model="obj"></el-input> |
|||
</template> |
|||
</mdp-field> |
|||
``` |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-field/image-20240111190935618.png" alt="image-20240111190935618" style="zoom:50%;"/> |
|||
<img src="../../../../docs/images/ui-components/mdp-field/image-20240111191052830.png" alt="image-20240111191052830" style="zoom:50%;" /> |
|||
|
|||
|
|||
|
|||
### Attributes |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| ----------- | -------------------------- | -------------- | ------------------------------- | ------ | |
|||
| disabled | css: pointer-events: none; | Boolean | - | false | |
|||
| value | 文本框的内容 | String, Number | - | '' | |
|||
| label | 标签字段 | String | - | '' | |
|||
| placeholder | 占位符 | String | - | '' | |
|||
| color | 背景色 | String | - | '' | |
|||
| icon | 图标 | String | - | '' | |
|||
| showStyle | 控制组件的布局 | String | x / 不是x的任意值 | x | |
|||
| size | 设置头像的大小 | number/string | number / large / medium / small | small | |
|||
|
|||
### Events |
|||
|
|||
| 事件名 | 说明 | 回调参数 | |
|||
| ------ | -------------------------------------- | --------------------------------------------------------- | |
|||
| change | 仅在输入框失去焦点或用户按下回车时触发 | (currentVal: string \|number , oldVal: string \| number ) | |
|||
|
|||
@ -0,0 +1,137 @@ |
|||
### mdp-input |
|||
|
|||
|
|||
|
|||
#### 基本使用 |
|||
|
|||
```vue |
|||
<form class="c1"> |
|||
<mdp-input show-style="origin" :disabled="false" label="" placeholder="" type="text"></mdp-input> |
|||
</form> |
|||
``` |
|||
|
|||
```css |
|||
.c1 { |
|||
display: flex; |
|||
height: 100vh; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.c1 > * { |
|||
max-width: 200px; |
|||
} |
|||
``` |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-input/image-20240112102727553.png" alt="image-20240112102727553" style="zoom:50%;" /> |
|||
|
|||
#### 自定义 |
|||
|
|||
mdp-input 结构如下 |
|||
|
|||
```html |
|||
<slot> |
|||
├── <slot v-if="showStyle=='x'" name="avater"></slot> |
|||
├── <span> |
|||
│ ├── <slot name="info"> |
|||
│ │ ├── <span v-if="showStyle=='x'"> |
|||
│ │ │ ├── <div> |
|||
│ │ │ │ └── <slot name="value"></slot> |
|||
│ │ │ ├── <div> |
|||
│ │ │ │ └── <slot name="label"></slot> |
|||
│ │ │ └── </div> |
|||
│ │ ├── </span> |
|||
│ │ └── <span v-else> |
|||
│ │ └── <div> |
|||
│ │ └── <slot name="value"></slot> |
|||
│ │ </div> |
|||
│ │ </span> |
|||
│ └── </slot> |
|||
│── </span> |
|||
└── <span> |
|||
└── <slot name="oper"></slot> |
|||
</span> |
|||
</slot> |
|||
``` |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
status: "", |
|||
} |
|||
} |
|||
``` |
|||
|
|||
```vue |
|||
<mdp-input show-style="x"> |
|||
<template v-slot:default> |
|||
<el-input placeholder="请输入内容" v-model="status"> |
|||
<i class="el-icon-edit el-input__icon" slot="suffix"></i> |
|||
</el-input> |
|||
</template> |
|||
</mdp-input> |
|||
``` |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-input/image-20240112105047494.png" alt="image-20240112105047494" style="zoom:50%;" /> |
|||
|
|||
----- |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
obj: '' |
|||
} |
|||
} |
|||
``` |
|||
|
|||
```vue |
|||
<mdp-input show-style="x"> |
|||
<template v-slot:avater> |
|||
<i class="el-icon-s-custom"></i> |
|||
</template> |
|||
<template v-slot:info> |
|||
<el-input placeholder="username" :disabled="true"></el-input> |
|||
</template> |
|||
<template v-slot:oper> |
|||
<el-input v-model="obj"></el-input> |
|||
</template> |
|||
</mdp-input> |
|||
``` |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-input/image-20240111190935618.png" alt="image-20240111190935618" style="zoom:50%;" /> <img src="../../../../docs/images/ui-components/mdp-input/image-20240111191052830.png" alt="image-20240111191052830" style="zoom:50%;" /> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
### Autocomplete Attributes |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| :---------: | :----------------------------------------: | :-----: | :-------------------: | :------: | |
|||
| disabled | 禁用 | boolean | — | false | |
|||
| label | 标签字段 | String | — | '' | |
|||
| placeholder | 占位符 | String | — | '' | |
|||
| color | showStyle=='x'时生效，设置avatar部分的样式 | String | — | — | |
|||
| icon | showStyle=='x'时生效，设置avatar部分的Icon | String | — | — | |
|||
| showStyle | 控制组件的布局 | String | origin/x/{other} | 'origin' | |
|||
| size | 输入框尺寸，只在 `type!="textarea"` 时有效 | string | medium / small / mini | small | |
|||
|
|||
|
|||
|
|||
### Input Attributes |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| :------: | :----------------------------------------------------------: | :--------------: | :----------------------------------------------------------: | :----: | |
|||
| type | 类型 | String | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form__types) | text | |
|||
| min | 原生属性，设置最小值 | Number | — | null | |
|||
| rows | 输入框行数，只对 `type="textarea"` 有效 | Number | — | 2 | |
|||
| max | 原生属性，设置最大值 | Number | — | null | |
|||
| step | 原生属性，设置输入字段的合法数字间隔 | Number | — | null | |
|||
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean / object | — | false | |
|||
| readonly | 原生属性，是否只读 | boolean | — | false | |
|||
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | null | |
|||
|
|||
### Events |
|||
|
|||
| 事件名 | 说明 | 回调参数 | |
|||
| :----: | :------------------------------------: | :-------------------------------------------------------: | |
|||
| change | 仅在输入框失去焦点或用户按下回车时触发 | (currentVal: string \|number , oldVal: string \| number ) | |
|||
@ -0,0 +1,114 @@ |
|||
### Mdp-number |
|||
|
|||
`计数器` |
|||
|
|||
#### 基本使用 |
|||
|
|||
```vue |
|||
<mdp-number v-model="num" @change="handleChange" :min="1" :max="10"/> |
|||
``` |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
num: 4, |
|||
} |
|||
}, |
|||
methods: { |
|||
handleChange(value1, value2) { |
|||
console.log(value1, value2); |
|||
} |
|||
}, |
|||
``` |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-number/image-20240112114302491.png" alt="image-20240112114302491" style="zoom:50%;" /> |
|||
|
|||
#### 自定义 |
|||
|
|||
show-style !=='origin' 时的结构如下 |
|||
|
|||
```html |
|||
<slot> |
|||
├── <slot name="avater"></slot> |
|||
├── <span> |
|||
│ ├── <slot name="info"> |
|||
│ │ ├── <span v-if="showStyle=='x'"> |
|||
│ │ │ ├── <span> |
|||
│ │ │ │ └── <slot name="value"></slot> |
|||
│ │ │ ├── <span> |
|||
│ │ │ │ └── <slot name="label"></slot> |
|||
│ │ │ └── </span> |
|||
│ │ ├── </span> |
|||
│ │ └── <span v-else> |
|||
│ │ └── <slot name="value"></slot> |
|||
│ │ </span> |
|||
│ └── </slot> |
|||
└── </span> |
|||
└── <span> |
|||
└── <slot name="oper"></slot> |
|||
</span> |
|||
</slot> |
|||
``` |
|||
|
|||
例子1 |
|||
|
|||
```vue |
|||
<mdp-number show-style="x"> |
|||
<template v-slot:default> |
|||
<el-input-number v-model="num"></el-input-number> |
|||
</template> |
|||
</mdp-number> |
|||
``` |
|||
|
|||
```js |
|||
data() { |
|||
return { |
|||
num: 1, |
|||
} |
|||
} |
|||
``` |
|||
|
|||
例子2 |
|||
|
|||
```vue |
|||
<mdp-number show-style="x"> |
|||
<template v-slot:avater> |
|||
<i class="el-icon-s-order" style="font-size: 30px;"></i> |
|||
</template> |
|||
<template v-slot:info> |
|||
<el-input-number :disabled="true"></el-input-number> |
|||
</template> |
|||
<template v-slot:oper> |
|||
<el-input-number v-model="num"></el-input-number> |
|||
</template> |
|||
</mdp-number> |
|||
``` |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-number/image-20240112115454303.png" alt="image-20240112115454303" style="zoom:50%;" /><img src="../../../../docs/images/ui-components/mdp-number/image-20240112115522071.png" alt="image-20240112115522071" style="zoom:50%;" /> |
|||
|
|||
|
|||
|
|||
### Attributes |
|||
|
|||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|||
| :---------------: | :--------------------------------: | :-----: | :----------: | :-------------: | |
|||
| min | 设置计数器允许的最小值 | number | — | -Infinity | |
|||
| max | 设置计数器允许的最大值 | number | — | Infinity | |
|||
| step | 计数器步长 | number | — | 1 | |
|||
| step-strictly | 是否只能输入 step 的倍数 | boolean | — | false | |
|||
| precision | 数值精度 | number | — | 2 | |
|||
| controls | 是否使用控制按钮 | boolean | — | true | |
|||
| controls-position | 控制按钮位置 | string | — | right | |
|||
| disabled | 是否禁用计数器 | boolean | — | false | |
|||
| style-obj | 设置showStyle=='x'时，avatar的样式 | Object | — | marginTop:'5px' | |
|||
| label | 标签字段 | String | — | '' | |
|||
| placeholder | 输入框默认 placeholder | string | — | — | |
|||
| color | 设置showStyle=='x'时，直接指定颜色 | string | — | — | |
|||
| icon | 设置showStyle=='x'时，指定图标 | string | — | — | |
|||
| showStyle | 控制组件的布局 | String | origin/x/tag | 'origin' | |
|||
|
|||
### Events |
|||
|
|||
| 事件名 | 说明 | 回调参数 | |
|||
| :----: | :------------------------------------: | :-------------------------------------------------------: | |
|||
| change | 仅在输入框失去焦点或用户按下回车时触发 | (currentVal: string \|number , oldVal: string \| number ) | |
|||
@ -1,158 +1,61 @@ |
|||
### mdp-select 效果图 |
|||
- origin风格 |
|||
 |
|||
- tag风格 |
|||
 |
|||
- x风格 |
|||
1. 鼠标未进入 |
|||
 |
|||
2. 鼠标进入后 |
|||
 |
|||
### 用法 |
|||
#### 字典列表 |
|||
### mdp-select-table 效果图 |
|||
- 该组件与mdp-select效果一致，同样支持origin/tag/x三种风格，不同之处在于具有分页功能，适合超大表格数据的选择，如下图1所示，默认只会展示用过的数据，如果需要更多数据，需要点击【更多数据】按钮，将会弹出图2所示,当用户选中数据后，数据将填充到图1的下拉列表中，并且能够模拟select的选中事件 |
|||
 |
|||
|
|||
- 基本用法 |
|||
从数据库表meta_meta_option加载 item_code='userStatus'的列表数据 |
|||
```html |
|||
<mdp-select v-model='form.userStatus' item-code='userStatus'/> |
|||
``` |
|||
- 不同展示风格 |
|||
1. 按select的原始方式展示，用于查询条件、一般表单输入等场景 |
|||
```html |
|||
<mdp-select show-style="origin" v-model='form.userStatus' item-code='userStatus'/> |
|||
``` |
|||
2. 鼠标未进入时，展示为tag,鼠标进入后，展示为下拉列表可选状态，用于可编辑表格 |
|||
```html |
|||
<mdp-select show-style="tag" v-model='form.userStatus' item-code='userStatus'/> |
|||
``` |
|||
3. 相对于tag风格，x风格更综合，展示包括label、title、头像等 |
|||
```html |
|||
<mdp-select show-style="x" v-model='form.userStatus' item-code='userStatus'/> |
|||
``` |
|||
- 带过滤条件用法 |
|||
可通过 params传递后台接受的任意参数 |
|||
```html |
|||
<mdp-select v-model='form.userStatus' item-code='userStatus' :params="{relyType:'1'}"/> |
|||
``` |
|||
#### 自定义列表 |
|||
|
|||
```html |
|||
<mdp-select v-model='userStatus' :options="[{id:'0',name:'无效'},{id:'1',name:'有效'}]"/> |
|||
``` |
|||
|
|||
#### 在原有列表添加额外的列表 |
|||
|
|||
```html |
|||
<mdp-select v-model='userStatus' item-code="userStatus" :plus-options="[{id:'0',name:'无效'},{id:'1',name:'有效'}]"/> |
|||
``` |
|||
 |
|||
|
|||
### 用法 |
|||
|
|||
#### 过滤掉部分不需要的列表选项 |
|||
```js |
|||
filterFun(option,options){ |
|||
if(option.id=='x' || option.relyType=='1'){ |
|||
return false;//过滤 |
|||
}else{ |
|||
return true |
|||
} |
|||
} |
|||
``` |
|||
```html |
|||
<mdp-select v-model='userStatus' item-code="userStatus" :filter-fun="filterFun"/> |
|||
``` |
|||
#### 通过监听change2获取选中的对象 |
|||
```js |
|||
onUserStatusCange(option){ |
|||
this.username=option.name |
|||
this.userType=option.relyType |
|||
} |
|||
``` |
|||
```html |
|||
<mdp-select v-model='userStatus' item-code="userStatus" @change2="onUserStatusCange"/> |
|||
#### 通过属性columnCfgs传入表格字段列表，mdp框架将解析出表头内容，用于配置显示列，排序，高级查询等 |
|||
```html |
|||
<mdp-select-table show-style="origin" :load-fun="loadFun" :column-cfgs="columnCfgs"> |
|||
</mdp-select-table> |
|||
``` |
|||
```js |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
//从后台加载数据的api |
|||
loadFun:this.$mdp.listBranch, |
|||
columnCfgs:{ |
|||
[ |
|||
{label:'机构编号',property:'id'}, |
|||
{label:'机构名称',property:'branchName'}, |
|||
{label:'地址',property:'address'}, |
|||
] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
#### 多选、单选模式 |
|||
```html |
|||
<mdp-select-table show-style="origin" :load-fun="loadFun" :column-cfgs="columnCfgs" :multiple="true"> |
|||
</mdp-select-table> |
|||
``` |
|||
```js |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
//从后台加载数据的api |
|||
loadFun:this.$mdp.listBranch, |
|||
columnCfgs:{ |
|||
[ |
|||
{label:'机构编号',property:'id'}, |
|||
{label:'机构名称',property:'branchName'}, |
|||
{label:'地址',property:'address'}, |
|||
] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
#### 从其它api获取数据 |
|||
通过$mdp.listBranch查询后台数据，params将作为查询参数发给后台，props告诉组件id，name分别取后台返回的对象的哪个属性 |
|||
```html |
|||
<mdp-select v-model='userStatus' :load-fun="$mdp.listBranch" :params="{type:'1'}" :props="{id:'branchId',name:'branchName'}"/> |
|||
``` |
|||
### Attributes |
|||
|参数|说明|类型|可选值|默认值| |
|||
|--------|------|--------|-----------------|----------------| |
|||
|show-type|组件分类|string|select / checkbox / radio| select |
|||
|show-style|展示风格|string|origin / tag / x| origin |
|||
|props|对象属性对照|object| |{id:'id',name:'name'} |
|||
|loadFun|从后台加载数据的api|function,返回Promise| | |
|||
|split|多选的时候，如果要返回字符串时的分隔符，如果设置了值，v-mode传入传出的值将是被该分隔符分割的字符串,如v-model="1,2,3,4"|string| , | |
|||
|filterFun|从后台返回的数据进行过滤后再装载到下拉列表,filterFun(option,options),返回true\false,false则过滤掉|function| | |
|||
|options|直接指定列表数据|Array |
|||
|plusOptions|在原有列表上添加额外的列表项 |
|||
|⚠️注意：|以上为mdp-ui对element-ui的改造，后面的属于element-ui的原有属性 |
|||
|value / v-model|绑定值|boolean / string / number|—|— |
|||
|multiple|是否多选|boolean|—|false |
|||
|disabled|是否禁用|boolean|—|false |
|||
|value-key|作为 value 唯一标识的键名，绑定值为对象类型时必填|string|—|value |
|||
|size|输入框尺寸|string|medium/small/mini|— |
|||
|clearable|是否可以清空选项|boolean|—|false |
|||
|collapse-tags|多选时是否将选中值按文字的形式展示|boolean|—|false |
|||
|multiple-limit|多选时用户最多可以选择的项目数，为 0 则不限制|number|—|0 |
|||
|name|select input 的 name 属性|string|—|— |
|||
|autocomplete|select input 的 autocomplete 属性|string|—|off |
|||
|~~auto-complete~~|下个主版本弃用|string|—|off |
|||
|placeholder|占位符|string|—|请选择 |
|||
|filterable|是否可搜索|boolean|—|false |
|||
|~~allow-create~~|是否允许用户创建新条目，需配合 filterable 使用|boolean|—|false |
|||
|filter-method|自定义搜索方法|function|—|— |
|||
|~~remote~~|是否为远程搜索|boolean|—|false |
|||
|~~remote-method~~|远程搜索方法|function|—|— |
|||
|~~loading~~|是否正在从远程获取数据|boolean|—|false |
|||
|~~loading-text~~|远程加载时显示的文字|string|—|加载中 |
|||
|no-match-text|搜索条件无匹配时显示的文字，也可以使用slot="empty"设置|string|—|无匹配数据 |
|||
|no-data-text|选项为空时显示的文字，也可以使用slot="empty"设置|string|—|无数据 |
|||
|popper-class|Select 下拉框的类名|string|—|— |
|||
|reserve-keyword|多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词|boolean|—|false |
|||
|~~default-first-option~~|在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用|boolean|-|false |
|||
|~~popper-append-to-body~~|是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false|boolean|-|true |
|||
|~~automatic-dropdown~~|对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单|boolean|-|false |
|||
|
|||
|
|||
### Events |
|||
|事件名称|说明|回调参数| |
|||
|--------|------|--------| |
|||
change2|选中值发生变化时触发，在需要获取值以外更多信息时使用|目前的选中的整个对象,如果multiple=false,返回一个对象，否则返回对象数组 |
|||
change|选中值发生变化时触发|目前的选中值，如果multiple=false,返回一个值，否则返回值数组，如果split有则，则返回以split分割的字符串，如1,2,3,4,5 |
|||
visible-change|下拉框出现/隐藏时触发|出现则为 true，隐藏则为 false |
|||
remove-tag|多选模式下移除tag时触发|移除的tag值 |
|||
clear|可清空的单选模式下用户点击清空按钮时触发|— |
|||
blur|当 input 失去焦点时触发|(event: Event) |
|||
focus|当 input 获得焦点时触发|(event: Event) |
|||
|
|||
### slot |
|||
|name|说明| |
|||
|--------|------| |
|||
—|Option 组件列表 |
|||
info|鼠标未进入时展示的内容，showStyle=tag\x时有效 |
|||
oper|鼠标进入后展示的内容，showStyle=tag\x时有效 |
|||
~~prefix|Select 组件头部内容~~ |
|||
empty|无选项时的列表 |
|||
|
|||
### ~~Option Group Attributes~~ |
|||
|
|||
|参数|说明|类型|可选值|默认值| |
|||
|--------|------|--------|-----------------|----------------| |
|||
label|分组的组名|string|—|— |
|||
disabled|是否将该分组下所有选项置为禁用|boolean|—|false |
|||
|
|||
### ~~Option Attributes~~ |
|||
|
|||
|参数|说明|类型|可选值|默认值| |
|||
|--------|------|--------|-----------------|----------------| |
|||
value|选项的值|string/number/object|—|— |
|||
label|选项的标签，若不设置则默认与 value 相同|string/number|—|— |
|||
disabled|是否禁用该选项|boolean|—|false |
|||
### Methods |
|||
|
|||
|方法名|说明|参数| |
|||
|--------|------|--------| |
|||
focus|使 input 获取焦点|- |
|||
blur|使 input 失去焦点，并隐藏下拉框|- |
|||
相关配置与mdp-table一摸一样，具体查看 |
|||
[mdp-table](/src/components/mdp-ui/mdp-table) |
|||
@ -0,0 +1,180 @@ |
|||
### mdp-table |
|||
该组件相对于el-table，进行了以下优化： |
|||
内置了增、删、改、查、高级查询、重置查询、导出、列配置、分页、批量编辑等功能、内置了对按钮权限的控制机制,功能非常强大 |
|||
|
|||
- 综合管理 |
|||
 |
|||
- 可编辑表格 |
|||
 |
|||
- 可编辑-树状表格 |
|||
 |
|||
|
|||
### 用法 |
|||
|
|||
#### 基本用法，根el-table保持一致,直接定义表头，mdp框架将解析出表头内容，用于配置显示列，排序，高级查询等 |
|||
```html |
|||
<mdp-table :crud-apis="crudApis"> |
|||
<el-table-column |
|||
prop="bizDate" |
|||
label="日期" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="stuName" |
|||
label="姓名" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="stuAddress" |
|||
label="地址"> |
|||
</el-table-column> |
|||
</mdp-table> |
|||
``` |
|||
```js |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
//操作后台数据的api列表 |
|||
crudApis:{ |
|||
list:this.$mdp.listUser, |
|||
add: this.$mdp.addUser, |
|||
edit: this.$mdp.editUser, |
|||
del: this.$mdp.delUser, |
|||
editSomeFields:this.$mdp.editSomeFieldsUser, |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
|
|||
#### 通过属性columnCfgs传入表格字段列表，mdp框架将解析出表头内容，用于配置显示列，排序，高级查询等 |
|||
```html |
|||
<mdp-table :crud-apis="crudApis" :column-cfgs="columnCfgs"> |
|||
</mdp-table> |
|||
``` |
|||
```js |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
//操作后台数据的api列表 |
|||
crudApis:{ |
|||
list:this.$mdp.listUser, |
|||
add: this.$mdp.addUser, |
|||
edit: this.$mdp.editUser, |
|||
del: this.$mdp.delUser, |
|||
editSomeFields:this.$mdp.editSomeFieldsUser, |
|||
}, |
|||
columnCfgs:{ |
|||
[ |
|||
{label:'日期',property:'bizDate'}, |
|||
{label:'姓名',property:'stuName'}, |
|||
{label:'地址',property:'stuAddress'}, |
|||
] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
#### 多选、单选模式、可编辑表格 |
|||
```html |
|||
<mdp-table :crud-apis="crudApis" :column-cfgs="columnCfgs" :multiple="true" :edit="true"> |
|||
</mdp-table> |
|||
``` |
|||
```js |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
//操作后台数据的api列表 |
|||
crudApis:{ |
|||
list:this.$mdp.listUser, |
|||
add: this.$mdp.addUser, |
|||
edit: this.$mdp.editUser, |
|||
del: this.$mdp.delUser, |
|||
editSomeFields:this.$mdp.editSomeFieldsUser, |
|||
}, |
|||
columnCfgs:{ |
|||
[ |
|||
{label:'日期',property:'bizDate'}, |
|||
{label:'姓名',property:'stuName'}, |
|||
{label:'地址',property:'stuAddress'}, |
|||
] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
### Attributes |
|||
|参数|说明|类型|可选值|默认值| |
|||
|--------|------|--------|-----------------|----------------| |
|||
|crud-apis|增删改查的接口函数|object|-| - |
|||
|multiple|是否多选|boolean|—|false |
|||
|show-hi-query|是否显示高级查询|boolean|—|true |
|||
|show-common-query|是否显示常规查询|boolean|—|true |
|||
|edit|是否可编辑|boolean|—|false |
|||
|column-cfgs|表头列配置项列表|Array|-|- |
|||
|
|||
|
|||
|
|||
### Events |
|||
|事件名称|说明|回调参数| |
|||
|--------|------|--------| |
|||
change2|选中值发生变化时触发，在需要获取值以外更多信息时使用|目前的选中的整个对象,如果multiple=false,返回一个对象，否则返回对象数组 |
|||
change|选中值发生变化时触发|目前的选中值，如果multiple=false,返回一个值，否则返回值数组，如果split有则，则返回以split分割的字符串，如1,2,3,4,5 |
|||
visible-change|下拉框出现/隐藏时触发|出现则为 true，隐藏则为 false |
|||
remove-tag|多选模式下移除tag时触发|移除的tag值 |
|||
clear|可清空的单选模式下用户点击清空按钮时触发|— |
|||
blur|当 input 失去焦点时触发|(event: Event) |
|||
focus|当 input 获得焦点时触发|(event: Event) |
|||
|
|||
### slot |
|||
|name|说明| |
|||
|--------|------| |
|||
—|Option 组件列表 |
|||
info|鼠标未进入时展示的内容，showStyle=tag\x时有效 |
|||
oper|鼠标进入后展示的内容，showStyle=tag\x时有效 |
|||
~~prefix|Select 组件头部内容~~ |
|||
empty|无选项时的列表 |
|||
|
|||
### column-cfgs 表头字段配置 |
|||
|参数|说明|类型|可选值|默认值| |
|||
|--------|------|--------|-----------------|----------------| |
|||
label|列名|string|—|— |
|||
property|属性名，驼峰命名，用于反解析出表字段|string|—|— |
|||
sortNo|前端显示排序，排序从0-999，越小越靠前,在表头、常规查询、高级查询的显示顺序|Number|—|— |
|||
isCommon|是否常用，用于常规查询是否显示|Boolean|true/false|false |
|||
colType|数据库字段类型| string/int/date/datatime/|string/int/date/datatime/|string |
|||
showHq|是否在高级查询中显示|boolean|true、false|true |
|||
showCol|列名|boolean|—|— |
|||
sqlOper|数据库操作符|string|gt/lt/ge/le/eq/ne/left_like/right_like/like/in/nin/bwtween/sql|eq |
|||
sqlVal|默认值|string|—|多选的话逗号分隔 |
|||
beginVal|区间取值时的开始值|string|—|如果sqlOper=between,值存于beginVal及envVal中 |
|||
endVal|区间取值时的结束值|string|—|如果sqlOper=between,值存于beginVal及envVal中 |
|||
pk|是否为主键|boolean|true、false|false |
|||
itemCode|字典表中itemCode字段，填写了该值将从字典表加载下拉列表|string|—|— |
|||
colPrefix|属性需要添加前缀时使用，比如res.id=xxxxx,此次填写res.|string|—|— |
|||
disabledHq|是否允许编辑查询条件|boolean|—|— |
|||
|
|||
### crud-apis api列表 |
|||
|
|||
|参数|说明|类型|可选值|默认值| |
|||
|--------|------|--------|-----------------|----------------| |
|||
list|查询api|Promise|—|— |
|||
add|新增api|Promise|—|— |
|||
edit|修改api|Promise|—|— |
|||
del|删除api|Promise|—|— |
|||
editSomeFields|批量修改部分字段|Promise|—|— |
|||
### Methods |
|||
|
|||
|方法名|说明|参数| |
|||
|--------|------|--------| |
|||
focus|使 input 获取焦点|- |
|||
blur|使 input 失去焦点，并隐藏下拉框|- |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue