本文次要基于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~
发表回复