陈裕财
2 years ago
1 changed files with 168 additions and 169 deletions
@ -1,180 +1,179 @@ |
|||
## 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 |
|||
### 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, |
|||
} |
|||
} |
|||
``` |
|||
|
|||
|
|||
|
|||
```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="../../../../docs/images/ui-components/mdp-table/image-20240113175843075.png" alt="image-20240113175843075" style="zoom:50%;" /> |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-table/image-20240113175907878.png" alt="image-20240113175907878" style="zoom:50%;" /> |
|||
|
|||
模糊查询 |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-table/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" |
|||
} |
|||
} |
|||
] |
|||
</script> |
|||
``` |
|||
|
|||
|
|||
|
|||
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] |
|||
#### 通过属性columnCfgs传入表格字段列表，mdp框架将解析出表头内容，用于配置显示列，排序，高级查询等 |
|||
```html |
|||
<mdp-table :crud-apis="crudApis" :column-cfgs="columnCfgs"> |
|||
</mdp-dialog> |
|||
``` |
|||
```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'}, |
|||
] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
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',}); |
|||
} |
|||
}, |
|||
</script> |
|||
``` |
|||
|
|||
父组件： |
|||
|
|||
```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}); |
|||
#### 多选、单选模式、可编辑表格 |
|||
```html |
|||
<mdp-table :crud-apis="crudApis" :column-cfgs="columnCfgs" :multiple="true" :edit="true"> |
|||
</mdp-dialog> |
|||
``` |
|||
```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'}, |
|||
] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
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}, |
|||
// 可以根据需要添加其他列配置 |
|||
] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
<img src="../../../../docs/images/ui-components/mdp-table/image-20240113184113330.png" alt="image-20240113184113330" style="zoom:50%;" /> |
|||
### 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/|—|— |
|||
showHq|是否在高级查询中显示|true|—|— |
|||
label|列名|string|—|— |
|||
label|列名|string|—|— |
|||
label|列名|string|—|— |
|||
label|列名|string|—|— |
|||
label|列名|string|—|— |
|||
label|列名|string|—|— |
|||
label|列名|string|—|— |
|||
|
|||
### 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