Browse Source
Merge remote-tracking branch 'origin/zyl-branch' into mdp-lcode-ui-web-2.0.0-qqkj-inner
master
Merge remote-tracking branch 'origin/zyl-branch' into mdp-lcode-ui-web-2.0.0-qqkj-inner
master
陈裕财
2 years ago
9 changed files with 931 additions and 52 deletions
-
87README.md
-
4src/api/mdp_pub/mdp_config.js
-
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
-
102src/components/mdp-ui/mdp-field/README.md
-
137src/components/mdp-ui/mdp-input/README.md
-
114src/components/mdp-ui/mdp-number/README.md
-
180src/components/mdp-ui/mdp-table/README.md
@ -1,10 +1,126 @@ |
|||||
### mdp-date |
|
||||
|
## mdp-date |
||||
该组件除了提供origin\tag\x三种样式，其它同element-ui中的el-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="/Users/mengdanai/Library/Application Support/typora-user-images/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="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240110175355789.png" alt="3" style="zoom:50%;" /> |
||||
|
|
||||
|
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/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="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240110175435534.png" alt="50" style="zoom:50%;" /> |
||||
|
|
||||
|
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240110175446637.png" alt="image-20240110175446637" style="zoom:50%;" /> |
||||
|
|
||||
|
#### `pickerOptions` |
||||
|
|
||||
|
格式：[{ text: '今天', onClick(picker) { picker.$emit('pick', new Date() ); } }] |
||||
|
|
||||
|
new Date() 是 选择'今天' 时得到的数据 |
||||
|
|
||||
|
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/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,102 @@ |
|||||
|
### 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="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240111190935618.png" alt="image-20240111190935618" style="zoom:50%;" /> <img src="/Users/mengdanai/Library/Application Support/typora-user-images/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="/Users/mengdanai/Library/Application Support/typora-user-images/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="/Users/mengdanai/Library/Application Support/typora-user-images/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="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240111190935618.png" alt="image-20240111190935618" style="zoom:50%;" /> <img src="/Users/mengdanai/Library/Application Support/typora-user-images/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="/Users/mengdanai/Library/Application Support/typora-user-images/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="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240112115454303.png" alt="image-20240112115454303" style="zoom:50%;" /><img src="/Users/mengdanai/Library/Application Support/typora-user-images/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 ) | |
||||
@ -0,0 +1,180 @@ |
|||||
|
## mdp-table |
||||
|
|
||||
|
|
||||
|
|
||||
|
#### 简单使用 |
||||
|
|
||||
|
后端必须是该系统的后端项目 |
||||
|
|
||||
|
```vue |
||||
|
<mdp-table :crud-apis="crudApis" :visible="true" :column-cfgs="columnConfigs" ></mdp-table> |
||||
|
``` |
||||
|
|
||||
|
```js |
||||
|
data() { |
||||
|
return { |
||||
|
crudApis: { |
||||
|
// list: params => { |
||||
|
// return axios.get(``, {params}); |
||||
|
// } |
||||
|
list: params => { |
||||
|
config.params = params |
||||
|
return axios.request(config) |
||||
|
} |
||||
|
}, |
||||
|
columnConfigs: [ |
||||
|
// {property: 【需要显示的数据，返回的单个数据的key】, label: 【表头】, isCommon: 【是否可查询】}, |
||||
|
{property: 'rolename', label: 'rolename', isCommon: true}, |
||||
|
{property: 'branchId', label: 'branchId', isCommon: true}, |
||||
|
{property: 'dataLvl', label: 'dataLvl', isCommon: true}, |
||||
|
// 可以根据需要添加其他列配置 |
||||
|
] |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
config配置文件是 [体验环境](https://maimengcloud.com/lcode/m1/) 中的角色管理页的接口 |
||||
|
|
||||
|
返回的单个`数据格式`： |
||||
|
|
||||
|
```json |
||||
|
{ |
||||
|
"branchId": "", |
||||
|
"roleend": null, |
||||
|
"roleid": "", |
||||
|
"rolename": "", |
||||
|
"sortOrder": null, |
||||
|
"crdate": null, |
||||
|
"deptid": "", |
||||
|
"remark": "", |
||||
|
"roletype": "", |
||||
|
"dataLvl": 5, |
||||
|
"enabled": "", |
||||
|
"rolebeg": null |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
|
||||
|
```js |
||||
|
const axios = require('axios'); |
||||
|
|
||||
|
let config = { |
||||
|
method: 'get', |
||||
|
maxBodyLength: Infinity, |
||||
|
url: 'https://maimengcloud.com/api/m1/lcode/mdp/sys/role/list', |
||||
|
headers: { |
||||
|
..... |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
export default config |
||||
|
``` |
||||
|
|
||||
|
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240113175843075.png" alt="image-20240113175843075" style="zoom:50%;" /> |
||||
|
|
||||
|
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240113175907878.png" alt="image-20240113175907878" style="zoom:50%;" /> |
||||
|
|
||||
|
模糊查询 |
||||
|
|
||||
|
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240113180009654.png" alt="image-20240113180009654" style="zoom:50%;" /> |
||||
|
|
||||
|
支持>、<、 >=、<=、!=、*陈*、$IS NULL、$IN 1,2,3、between 1,5等操作符 |
||||
|
|
||||
|
----- |
||||
|
|
||||
|
#### 自定义 |
||||
|
|
||||
|
测试接口：https://reqres.in/api/users |
||||
|
|
||||
|
接口首页: https://reqres.in |
||||
|
|
||||
|
响应数据： |
||||
|
|
||||
|
```json |
||||
|
{ |
||||
|
"page":1, |
||||
|
"per_page":6, |
||||
|
"total":12, |
||||
|
"total_pages":2, |
||||
|
"data":[ |
||||
|
{ |
||||
|
"id":1, |
||||
|
"email":"george.bluth@reqres.in", |
||||
|
"first_name":"George", |
||||
|
"last_name":"Bluth", |
||||
|
"avatar":"https://reqres.in/img/faces/1-image.jpg" |
||||
|
} |
||||
|
] |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
|
||||
|
Mdp-table： |
||||
|
|
||||
|
```js |
||||
|
preQueryParamCheck(params) { |
||||
|
//处理参数以满足调用后台接口 |
||||
|
params.per_page = params.pageSize; |
||||
|
params.page = params.pageNum; |
||||
|
let arr = ['pageSize', 'pageNum', 'total', 'count'] // 需要删除内部实现的分页 |
||||
|
for (let item in params) { |
||||
|
if (params[item] === undefined || params[item] === '' || arr.includes(item)) { // 判断查询条件是否存在 |
||||
|
delete params[item] |
||||
|
} |
||||
|
} |
||||
|
if (!isNaN(params.id)) { |
||||
|
params.id = parseInt(params.id, 10); |
||||
|
} else { |
||||
|
delete params.id |
||||
|
} |
||||
|
return true; |
||||
|
}, |
||||
|
``` |
||||
|
|
||||
|
Mdp-table: |
||||
|
|
||||
|
```js |
||||
|
getResult(res, apiName) { |
||||
|
// 请求结果处理 |
||||
|
let data = res.data |
||||
|
if (res.status === 200) { |
||||
|
this.pageInfo.total = data.total; |
||||
|
this.pageInfo.pageNum = data.page; |
||||
|
this.pageInfo.pageSize = data.per_page; |
||||
|
let tableDatas = Array.isArray(data.data) ? data.data : new Array(data.data); |
||||
|
this.tableDatas = tableDatas |
||||
|
this.parseExpand(tableDatas, this.expandFieldName) |
||||
|
this.afterList(tableDatas, res.status, apiName) |
||||
|
} else { |
||||
|
this.$notify({title: data.support.url, message: data.support.text, type: 'success',}); |
||||
|
} |
||||
|
}, |
||||
|
``` |
||||
|
|
||||
|
父组件： |
||||
|
|
||||
|
```vue |
||||
|
<mdp-table :crud-apis="crudApis" :visible="true" :column-cfgs="columnConfigs" :multiple="true"/> |
||||
|
``` |
||||
|
|
||||
|
```js |
||||
|
data() { |
||||
|
return { |
||||
|
crudApis: { |
||||
|
list: params => { |
||||
|
return axios.get(`https://reqres.in/api/users`, {params}); |
||||
|
} |
||||
|
}, |
||||
|
columnConfigs: [ |
||||
|
{property: 'avatar', label: '头像', isCommon: false}, |
||||
|
{property: 'email', label: '邮箱', isCommon: false}, |
||||
|
{property: 'first_name', label: '名字', isCommon: false}, |
||||
|
{property: 'last_name', label: '姓', isCommon: false}, |
||||
|
{property: 'id', label: 'Id', isCommon: true}, |
||||
|
// 可以根据需要添加其他列配置 |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
<img src="/Users/mengdanai/Library/Application Support/typora-user-images/image-20240113184113330.png" alt="image-20240113184113330" style="zoom:50%;" /> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue