|
|
|
@ -1,179 +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-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, |
|
|
|
} |
|
|
|
} |
|
|
|
## 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="../../../../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> |
|
|
|
] |
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
#### 通过属性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'}, |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
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] |
|
|
|
} |
|
|
|
</script> |
|
|
|
} |
|
|
|
if (!isNaN(params.id)) { |
|
|
|
params.id = parseInt(params.id, 10); |
|
|
|
} else { |
|
|
|
delete params.id |
|
|
|
} |
|
|
|
return true; |
|
|
|
}, |
|
|
|
``` |
|
|
|
|
|
|
|
#### 多选、单选模式、可编辑表格 |
|
|
|
```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'}, |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
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}); |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
}, |
|
|
|
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}, |
|
|
|
// 可以根据需要添加其他列配置 |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
``` |
|
|
|
|
|
|
|
### 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 失去焦点，并隐藏下拉框|- |
|
|
|
<img src="../../../../docs/images/ui-components/mdp-table/image-20240113184113330.png" alt="image-20240113184113330" style="zoom:50%;" /> |
陈裕财
2 years ago
