共计 8773 个字符，预计需要花费 22 分钟才能阅读完成。
本文次要基于 element-ui 深度封装，旨在疾速实现列表查问、增删改查、弹窗表单。能够看到上面残缺示例中蕴含了 Vue2 后盾管理系统中日常基本功能，代码量却非常少，可复用性十分高，6 点上班美滋滋。
github 地址 不断更新保护，如果对你有帮忙，帮忙加个 star~
一、残缺示例
蕴含列表 table、分页、搜寻条件查问、新增、编辑、删除
<mx-crud
:data="tableList"
:option="listOption"
:page="page"
:table-loading="loading"
@size-change="sizeChange"
@current-change="currentChange"
@search-change="searchChange"
@row-save="addFun"
@row-update="updateFun"
@row-del="rowDel"
@custom-add="rowCustomAdd"
@custom-view="rowCustomView"
@custom-edit="rowCustomEdit"
@search-reset="resetList">
<template v-slot:zdy="{row}">
{{row.id}}
</template>
<template v-slot:menu="{row}"> menu 插槽{{row}} </template>
</mx-crud>listOption() {
return {
isShowmenu: true, // 操作栏配置 - 是否显示操作栏
isViewBtn: true, // 操作栏配置 - 是否显示查看
isEditBtn: true, // 操作栏配置 - 是否显示编辑
isDelBtn: true, // 操作栏配置 - 是否显示删除
exportBtn: true, // 操作栏配置 - 导出
exportRecordBtn: true, // 操作栏配置 - 导出记录
align: "center", // 表格列配置 - 对齐形式
index: true, // 表格列配置 - 索引
customAdd: false, // 自定义新增
customView: true, // 自定义查看
customEdit: false, // 自定义编辑
titleAliasEdit: "自定义 title",
column: [
{
label: "姓名 1",
labelAlias: "自定义 label 别名", // 弹窗表单配置 - 自定义 label 别名
prop: "name",
search: true, // 表格列配置 - 是否搜寻
width: 200, // 表格列配置 - 宽度
rules: {
required: true,
message: "请输出",
trigger: ["blur", "change"],
},
},
{
label: "自定义列",
prop: "zdy",
slot: true, // 表格列配置 - 自定义列
viewDisplay: false, // 弹窗表单配置 - 查看是否显示
editDisplay: false, // 弹窗表单配置 - 编辑是否显示
addDisplay: false, // 弹窗表单配置 - 新增是否显示
},
{
label: "多选框",
prop: "selectType",
// multiple: true,
search: true,
type: "select", // 搜寻 - 定义类型
rules: {
required: true,
message: "请抉择",
trigger: ["blur", "change"],
},
dicData: [
{
label: "紧急布告",
value: 1,
},
{
label: "上线布告",
value: 2,
},
{
label: "业务布告",
value: 3,
},
],
formatter: (row) => {
// 表格列配置 - 筛选
const map = new Map([[1, ` 紧急布告 `],
[2, ` 上线布告 `],
[3, ` 业务布告 `],
]);
return map.get(row.selectType);
},
},
{
label: "工夫",
prop: "date",
search: true,
type: "date", // 搜寻 - 定义类型
format: "yyyy-MM-dd",
valueFormat: "yyyy-MM-dd",
rules: {
required: true,
message: "请抉择",
trigger: ["blur", "change"],
},
},
{
label: "状态 formatter",
prop: "status",
viewDisplay: false, // 弹窗表单配置 - 查看是否显示
editDisplay: false, // 弹窗表单配置 - 编辑是否显示
addDisplay: false, // 弹窗表单配置 - 新增是否显示
formatter: (row) => {
// 表格列配置 - 筛选
const map = new Map([[1, `<i class="class1"></i> 未开始 `],
[2, `<i class="class2"></i> 胜利 `],
[3, `<i class="class3"></i> 已实现 `],
]);
return map.get(row.status);
},
},
{
label: "列暗藏",
prop: "lyc",
viewDisplay: false, // 弹窗表单配置 - 查看是否显示
editDisplay: false, // 弹窗表单配置 - 编辑是否显示
addDisplay: false, // 弹窗表单配置 - 新增是否显示
hide: true, // 表格列配置 - 列暗藏
},
{
label: "日期 2",
prop: "date2",
hide: true,
viewDisplay: false, // 弹窗表单配置 - 查看是否显示
editDisplay: false, // 弹窗表单配置 - 编辑是否显示
addDisplay: false, // 弹窗表单配置 - 新增是否显示
align: "left", // 表格列配置 - 对齐形式
},
{
label: "地址 3",
prop: "address",
overHidden: true, // 表格列配置 - 内容超出暗藏
width: 100, // 表格列配置 - 宽度
rules: {
required: true,
message: "请输出",
trigger: ["blur", "change"],
},
},
],
};
},详情示例
二、属性办法介绍
这些属性办法应用频率较高，办法和属性都是在组件里抛出，当咱们须要某些性能和配置
时，增加即可
Crud
| 参数 | 说 明 | 类型 | 默认值 |
|---|---|---|---|
| data | 列表数据 | array | |
| option | 表单配置项 参考 Option 配置 | object | |
| page | 分页变量 参考 Page 参数 | object | |
| table-loading | 表格 loading | boolean | boolean |
Option
| 参数 | 说 明 | 类型 | 默认值 |
|---|---|---|---|
| index | 是否有序号 | boolean | |
| align | 列表对齐形式 | string | ‘center’ |
| isShowmenu | 是否显示操作栏 | boolean | false |
| isViewBtn | 是否显示查看按钮 | boolean | false |
| isEditBtn | 是否显示编辑按钮 | boolean | false |
| isDelBtn | 是否显示删除按钮 | boolean | false |
| exportBtn | 是否显示导出按钮 | boolean | |
| exportRecordBtn | 是否显示导出记录按钮 | boolean | |
| customAdd | 是否自定义新增回调 | boolean | |
| customView | 是否自定义查看回调 | boolean | |
| customEdit | 是否自定义编辑回调 | boolean | |
| titleAliasEdit | 自定义新增编辑弹窗 title | string |
Column 属性
| 参数 | 说 明 | 类型 | 默认值 |
|---|---|---|---|
| label | 列题目 | string | |
| prop | 列题目对应字段 | string | |
| width | 对应列的宽度 | string | |
| search | 是否为搜寻项 | Boolean | |
| rules | 弹窗表单校验规定 | object | |
| hide | 列表项是否显示 | Boolean | false |
| addDisplay | 表单新增时项是否显示 | Boolean | |
| editDisplay | 表单编辑时项是否显示 | Boolean | |
| viewDisplay | 表单查看时项是否显示 | Boolean | |
| formatter | 用来格式化列内容 | function | |
| dicData | 数据字典值 | array |
Events
| 事件名称 | 说 明 | 类型 |
| ————————- | ———————————————————————– | ————— |
| size-change | pageSize 扭转时会触发 | 每页条数 |
| current-change | currentPage 扭转时会触发 | 当前页 |
| search-change | 点击搜寻触发该事件 | |
| search-reset | 点击重置触发该事件 | |
| row-save | 新增数据确定触发该事件 | |
| row-update | 更新数据确定触发该事件 | |
| row-del | 行数据删除时触发该事件 | |
| custom-add | 自定义新增触发该事件 | |
| custom-edit | 自定义编辑触发该事件 | |
| custom-view | 自定义查看触发该事件 | |
三、搜寻 & 分页
管制 column 是否搜寻
search 变量管制列表项是否搜寻
listOption:{
column: [{
label: '姓名',
prop: 'name',
search:true, // 管制 column 是否搜寻
}]
}搜寻办法
search-change: 点击搜寻触发该事件 search-reset: 点击重置触发该事件
<mx-crud
:data="tableList"
:option="listOption"
:page="page"
:table-loading="loading"
@search-change="searchChange"
@search-reset="resetList">
</mx-crud>自定义列搜寻
配置 searchslot 为 true 即可开启自定义，列的 prop 加 Search 作为卡槽的名称
<mx-crud :option="listOption" :data="tableList" >
<!-- 搜寻 自定义 slot -->
<template v-slot:ageSearch="{column}"> {{column.prop}} </template>
</mx-crud>
listOption:{
column: [{
label: "自定义列搜寻",
prop: "age",
search: true,
searchslot: true,
}]
}页码和条数
currentPage 以后页码，total 总条数，pageSize 每页多少条数据
四、操作栏设置 & 表格列配置
操作栏暗藏 & 其余属性
isShowmenu 属性承受一个 Boolean 属性显示暗藏操作栏，默认为 false
menuWidth 属性设置操作栏宽度
自定义操作栏
menu 为操作栏自定义
<!-- 操作栏配置 - 自定义操作栏 -->
<template #menu="{row}"> menu 插槽 {{row.name}}</template>操作栏查看、编辑、删除按钮设置
isViewBtn 是否显示查看按钮, 默认 false;
isEditBtn 是否显示编辑按钮, 默认 false;
isDelBtn 是否显示删除按钮, 默认 false;
列配置暗藏 & 其余属性
hide 属性承受一个 Boolean 属性显示暗藏表格列，默认为 false
width 属性管制每列的宽度
align 属性管制每列的对齐形式
overHidden 设置 true 超出列表宽度内容以省略号显示
自定义列
设置列的属性 slot 为 true 时，在卡槽中用 prop 作为卡槽的名字即可
<template v-slot:zdy="{row}">
{{row.prop}}
</template>
{
label: "自定义列",
prop: "zdy",
slot: true, // 表格列配置 - 自定义列
},列内容格式化
formatter 办法格式化内容
{
label: "状态 formatter",
prop: "status",
formatter: (row) => {
const map = new Map([[1, `<i class="class1"></i> 未开始 `],
[2, `<i class="class2"></i> 胜利 `],
[3, `<i class="class3"></i> 已实现 `],
]);
return map.get(row.status);
}
}五、顶部按钮 & 自定义回调
顶部按钮管制
addBtn 属性设置是否显示新增按钮, 默认 true;
利用了 menuLeft 卡槽自定义顶部按钮
自定义回调
customAdd 自定义新增回调
<mx-crud
ref="crud"
:data="tableList"
:option="listOption"
@custom-add="rowCustomAdd">
</mx-crud>
listOption() {
return {customAdd: true, // 自定义新增回调}
}未设置时，默认关上新增弹窗表单；设置 customAdd 为 ture 时, 减少 custom-add 回调, 减少自定义解决。
customEdit 自定义编辑回调
<mx-crud
ref="crud"
:data="tableList"
:option="listOption"
@custom-edit="rowCustomEdit">
</mx-crud>
listOption() {
return {customEdit: true, // 自定义编辑回调}
}未设置时，默认关上编辑弹窗表单；设置 customEdit 为 ture 时, 减少 custom-edit 回调, 减少自定义解决。
customView 自定义查看回调
<mx-crud
ref="crud"
:data="tableList"
:option="listOption"
@custom-view="rowCustomView">
</mx-crud>
listOption() {
return {customView: true, // 自定义查看回调}
}未设置时，默认关上新增弹窗；设置 customView 为 ture 时, 减少 custom-view 回调, 减少自定义解决。
六、提取 Mixins & 增删改查封装
公共 Mixins
提取公共 Mixins, 缩小各个业务页面反复代码，蕴含 page、tableList、loading 属性，sizeChange、currentChange、增删改查办法等。自此业务开发时，只须要配置对应的 option，及 crud 接口即可实现根本业务开发，效率晋升杠杠的，反复低质的工作大幅度较少。
配置接口 & 增删改查封装
crud 逻辑绝对固定，抽取到 mixin 做相应封装解决。业务页面配置接口，mixin 中调用
mixins: [mixin],
data() {
return {
COM_HTTP: { // 配置接口
reqList: queryHomePageData, // 列表查问
reqDel: deleteHomePageData, // 删除
reqAdd: addHomePageData, // 新增
reqUpdate: updateHomePageData, // 编辑
}
}
}残缺 mixins
详情
export default {data() {
return {COM_HTTP: {}, // 以后默认申请
tableList: [], // 表格列表数据
loading: false, // 加载管制
page: {
currentPage: 1,
pageSize: 10,
total: 0,
},
};
},
mounted() {this.searchFun();
},
methods: {
// 抉择分页条数
sizeChange(val) {
this.page.currentPage = 1;
this.page.pageSize = val;
this.searchFun();},
// 跳转页码
currentChange(val) {
this.page.currentPage = val;
this.searchFun();},
// 触发按钮查问
searchChange(params) {this.searchFun(params, 1);
},
/** 查询方法 */
async searchFun(params, currentPage) {
this.loading = true;
// 传入参数有 current
if (currentPage) {this.page.currentPage = currentPage;}
const filnalParams = this.searchFunParamsHandle(params);
console.log('最初的申请参数 filnalParams:', filnalParams);
const {data: res} = await this.COM_HTTP.reqList(filnalParams);
// 没做 axios 数据拦挡 多一层构造
if (res.code === RESPONSE_CODE.SUCCESS) {this.tableList = res.data.results || [];
this.page.total = res.data.total || 0;
this.page.currentPage = res.data.currentPage || 1;
} else {this.$message.error(res.msg);
}
this.loading = false;
},
/** 列表查问参数解决 */
searchFunParamsHandle(params) {
let filnalParams = Object.assign({ page: this.page.currentPage, pageSize: this.page.pageSize},
params
);
return filnalParams;
},
// 删除 - 提醒弹窗
rowDel(row, index) {
const delTipMsg =
this.customDelMsg || this.delTipMsg || '确定删除该条数据?';
this.$confirm(delTipMsg, '提醒', {
confirmButtonText: '确定',
cancelButtonText: '勾销',
closeOnClickModal: false,
type: 'warning',
})
.then(() => {
// 开始删除
this.deleteFun(row, index);
})
.catch(() => {});
},
/**
* 减少办法
* @param {*} item 新增数据
* @param {*} doneCallback 执行实现回调
*/
async addFun(item, doneCallback){const { data: res} = await this.COM_HTTP.reqAdd(item)
// 没做 axios 数据拦挡 多一层构造
if (res.code === RESPONSE_CODE.SUCCESS) {this.$message.success('新增胜利')
this.searchFun()
doneCallback()} else {this.$message.error(res.msg);
}
},
/**
* 编辑更新办法
* @param {*} item 新增数据
* @param {*} doneCallback 执行实现回调
*/
async updateFun(item, doneCallback){const { data: res} = await this.COM_HTTP.reqUpdate(item)
// 没做 axios 数据拦挡 多一层构造
if (res.code === RESPONSE_CODE.SUCCESS) {this.$message.success('新增胜利')
this.searchFun()
doneCallback()} else {this.$message.error(res.msg);
}
},
// 删除办法
async deleteFun(item) {
// 调接口
const {data: res} = await this.COM_HTTP.reqDel(item)
// 没做 axios 数据拦挡 多一层构造
if (res.code === RESPONSE_CODE.SUCCESS) {this.$message.success('删除胜利')
} else {this.$message.error(res.msg);
}
},
// 搜寻清空
resetList() {console.log('resetList');
},
},
};七、其余性能 & 后续
整个根本查问、列表、分页增删改查已根本实现。当然性能没有八面玲珑，如很多 table 的属性配置和办法，到组件源码中减少对应的配置即可
如需请留言我会补上你所需的性能场景。后续：逐步完善性能，如果有人看，持续封装一个 Vue3 版本。
引入办法
初步公布了一个 npm 包，大家可下载应用，更倡议下载整个我的项目，联合示例看懂源码
// 组件库
import mxCrud from "mx-crud";
import 'mx-crud/lib/mx-crud.css';
// 调试或者自定义 crud
// import mxCrud from "../packages/src/index";八、最初
我更举荐的是屏幕前的你看懂封装的思路，几年前的我首次应用和浏览时，直呼 666，算是小开了眼界；整个代码量不是很大，逻辑也比较简单，一两把游戏的工夫足已；看懂之后减少日常业务开发需要的性能，信手拈来。将整体齐全消化吸收，逐渐拓展成公司组件库，妥妥的 KPI，进步整体前端的开发效率。
github 地址 不断更新保护，如果对你有帮忙，帮忙加个 star~
