Avue-curd个性化定制

article/2025/9/26 10:13:57

在使用vue(js)+elelment(ui)开发一些后台管理项目的时候，基本会用到 列表页，条件搜索(search),表格数据(table),分页，操作栏的，增、删、改、查几种操作。如下图这样的：

很多的页面都很类似，这里就给大家介绍一个，我自己最近研究的一个插件 avue-curd；整体的一个模块，包含列表，增、删、改、查；还可以通过slot插巣自定义局部组件内容

如下面，我按照产品自定义：隐藏了搜索模块、操作栏（这些都是可配置的）

上代码：主页面

<!--列表-->
<template><div class="execution"><basic-container><avue-crudref="crud"v-model="form":page="page":data="tableData":permission="permissionList":table-loading="tableLoading":option="tableOption"@on-load="getList"@refresh-change="refreshChange"@size-change="sizeChange"@current-change="currentChange"@row-update="handleUpdate"><template slot-scope="scope" slot="menu"><el-linkv-if="scope.row.status == -1"icon="el-icon-edit"type="primary"@click.stop="handleEdit(scope.row, scope.index)">审核</el-link></template><template slot="statusForm"><el-form-item style="margin-bottom: 0px"><el-radio-group@change="changeRequire"v-model="form.status"size="small"><el-radio border label="0">审核通过</el-radio><el-radio border label="-2">审核拒绝</el-radio></el-radio-group></el-form-item></template><template slot="status" slot-scope="scope"><span v-if="scope.row.status == 0" style="color: #67c23a">审核通过</span><span v-if="scope.row.status == -1" style="color: #409eff">待审核</span><span v-if="scope.row.status == -2" style="color: #f56c6c">审核拒绝</span></template></avue-crud></basic-container></div>
</template><script>
import { tenantPage, checkObj } from "@/api/admin/tenant";
import { tableOption } from "@/const/crud/admin/approval";
import { mapGetters } from "vuex";export default {name: "Tenant",data() {return {tableData: [],searchForm: {},form: {},page: {total: 0, // 总页数currentPage: 1, // 当前页数pageSize: 20, // 每页显示多少条},tableLoading: false,tableOption: tableOption,};},computed: {...mapGetters(["permissions"]),permissionList() {return {editBtn: this.vaildData(this.permissions.admin_systenant_edit, false),};},},methods: {handleEdit(row, index) {this.$refs.crud.rowEdit(row, index);},changeRequire(e) {if (e == "-2") {this.$refs.crud.formRules.rejectReason[0].required = true;} else {this.$refs.crud.formRules.rejectReason[0].required = false;}},getList(page, params) {this.tableLoading = true;tenantPage(Object.assign({current: page.currentPage,size: page.pageSize,},params,this.searchForm)).then((response) => {this.tableData = response.data.data.records;this.page.total = response.data.data.total;this.tableLoading = false;}).catch(() => {this.tableLoading = false;});},rowDel: function (row, index) {var _this = this;this.$confirm("是否确认删除机构名称为:" + row.name, "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(function () {return delObj(row.id);}).then((data) => {_this.$message.success("删除成功");this.getList(this.page);});},// 编辑弹窗确定handleUpdate: function (row, index, done, loading) {console.log(123321);checkObj(row).then((data) => {this.$message.success("修改成功");done();this.getList(this.page);}).catch(() => {loading();});},searchChange(form, done) {this.searchForm = form;this.page.currentPage = 1;this.getList(this.page, form);done();},refreshChange() {this.getList(this.page);},sizeChange(pageSize) {this.page.pageSize = pageSize;},currentChange(current) {this.page.currentPage = current;},},
};
</script>

引用配置表格配置字段option

/**   列表表格数据字段信息*/
var validatePhone = (rule, value, callback) => {const reg = /^1[3|4|5|7|8|9][0-9]{9}$/;if (reg.test(value)) {callback();} else {callback(new Error("手机号格式不正确"));}
};
var validateEmail = (rule, value, callback) => {const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;if (reg.test(value)) {callback();} else {callback(new Error("邮箱格式不正确"));}
};
var dicStatus = [{value: "0",label: "审核通过",type: "status_type",description: "审核通过"},{value: "-2",label: "审核拒绝",type: "status_type",description: "审核拒绝"},{value: "-1",label: "待审核",disabled: true,type: "status_type",description: "待审核"}
];
export const tableOption = {border: true,index: true,indexLabel: "序号",stripe: true,menuAlign: "center",align: "center",labelWidth: 120, // 弹出框表单lable宽度span: 24, // 弹出框表单项dialogWidth: 600, // 弹出框宽度addBtn: false, // 添加按钮columnBtn: false, // 列显隐按钮delBtn: false, // 行内删除按钮refreshBtn: false, // 刷新按钮editBtn: false, // 表格编辑按钮editBtnText: "审核",editTitle: "租户注册审核",menuWidth: 150,// menu: false, // 隐藏菜单column: [{label: "ID",prop: "id",editDisabled: true,editDisplay: false,addDisplay: false},{label: "机构名称",prop: "name",width: 200,editDisabled: true,rules: [{ required: true, message: "请输入机构名称", trigger: "blur" },{ min: 3, max: 32, message: "长度在 3 到 32 个字符", trigger: "blur" }]},{label: "租户编号",prop: "code",editDisabled: true,editDisplay: false,addDisplay: false},{label: "联系人账号",prop: "contactUsername",width: 120,hide: true,editDisplay: false,addDisplay: false,rules: [{required: true,message: "请输入联系人",trigger: "blur"}]},{label: "联系人姓名",prop: "contactRealName",width: 120,editDisabled: true,addDisplay: false,rules: [{required: true,message: "请输入联系人",trigger: "blur"}]},{label: "手机号",prop: "contactPhone",width: 150,editDisabled: true,addDisplay: false,rules: [{required: true,message: "请输入手机号",trigger: "blur"},{validator: validatePhone,trigger: "blur"}],editDisabled: true},{label: "邮箱",prop: "contactEmail",width: 180,editDisabled: true,addDisplay: false,rules: [{required: true,message: "请输入邮箱",trigger: "blur"},{validator: validateEmail,trigger: "blur"}]},{label: "审核状态",prop: "status",type: "radio",border: true,dicData: dicStatus,addDisplay: false,formslot: true,typeslot: true,slot: true,rules: [{required: true,message: "请选择审核状态",trigger: "blur"}]},{label: "提交时间",prop: "createTime",width: 180,type: "datetime",format: "yyyy-MM-dd hh:mm:ss",valueFormat: "yyyy-MM-dd hh:mm:ss",rules: [{required: true,message: "请输入创建时间",trigger: "blur"}],editDisabled: true,addDisplay: false,editDisplay: false},{label: "拒绝原因",prop: "rejectReason",editDisabled: false,addDisplay: false,hide: true,rules: [{required: false,message: "请输入拒绝原因",trigger: "blur"}]}]
};

具体的配置可以自己看avue-curd的文档配置：https://www.bookstack.cn/read/avue-2.x/391487d752fdf241.md

官方文档地址：https://avuejs.com/doc/crud/crud-doc

再结合solt的使用，你就可以实现以下，个性化的配置了。

<!----------------------------------------------------2020.12.15此处更新一处，crud里面自定义搜索项，本例子已状态项status为例 ------------------------------->

需求是列表上方的状态需要加个全部的选项，如下图

如果直接修改数据源改成这样的

var dicStatus = [{value: null,label: "全部",type: "status_type",description: "全部"},{value: "0",label: "正常",type: "status_type",description: "状态正常"},{value: "9",label: "冻结",type: "status_type",description: "状态冻结"}
];

新增或者编辑回显的时候，就是出现尴尬的一幕，如下图，不需要全部啊，

因为avue-crud里面，所有的封装的参数项都是，同一出处；这里就需要搜索框自定义了，search: true,  searchslot: true, 代码如下：

<avue-crudref="crud"v-model="form":page="page":data="tableData":permission="permissionList":table-loading="tableLoading":option="tableOption":search.sync="search" // 此处绑定搜索条件@on-load="getList"@search-change="searchChange"@refresh-change="refreshChange"@size-change="sizeChange"@current-change="currentChange"@row-update="handleUpdate"@row-save="handleSave"@row-del="rowDel"@sort-change="sortChange"><template slot="status" slot-scope="scope"><el-tag v-if="scope.row.status == 0">正常</el-tag><el-tag v-if="scope.row.status == 9" type="info">冻结</el-tag><el-tag v-if="scope.row.status == -1" type="warning">待审核</el-tag><el-tag v-if="scope.row.status == -2" type="danger">审核拒绝</el-tag></template> // 此处注意slot是 参数名字（status）+ Search<template slot="statusSearch" slot-scope="scope"><el-select v-model="search.status" placeholder="请选择"><el-optionv-for="item in statusOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></template></avue-crud>// data()里面新增search,这是crud搜索条件的集合search: {},statusOptions: [{value: null,label: "全部",type: "status_type",description: "全部",},{value: "0",label: "正常",type: "status_type",description: "状态正常",},{value: "9",label: "冻结",type: "status_type",description: "状态冻结",},],

 


http://chatgpt.dhexx.cn/article/elcY9KN8.shtml

相关文章

Python简单CURD

Python简单CURD

python Python的注释模块 python变量 格式化输出 转义字符 与 数据类型 控制台输入 实体类 Student.dy class Emp:def __init__(self,id,name,age,sex,sal):self.id idself.name nameself.age ageself.sex sexself.sal saldef __str__(self):return "学号&#xf…
阅读更多...
MySQL常用语句(CURD)

MySQL常用语句(CURD)

文章目录 一、数据库定义语言&#xff08;DDL&#xff09;1.1 库操作1.2 表操作 二、数据库操纵语言&#xff08;DML&#xff09;2.1 插入 insert2.2 修改 update2.3 删除 delete 三、数据库查询语言&#xff08;DQL&#xff09;3.1 单表查询①查询&#xff1a;select②条件&am…
阅读更多...
SpringBoot实现CURD

SpringBoot实现CURD

SpringBoot实现CURD 项目列表 Pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http:/…
阅读更多...
thinkphp curd 列表关联展现方式分享

thinkphp curd 列表关联展现方式分享

在维护自己的开源框架中&#xff0c;针对后台列表模板&#xff0c;有时候我们需要在一键CURD的情况下&#xff0c;进行多个字段的关联显示&#xff0c;比如用户订单表里面存在user_id字段&#xff0c;那么在显示的时候&#xff0c;我们期望显示出用户的名称&#xff0c;而不是用…
阅读更多...
mysql curd_mysql 基础之CURD

mysql curd_mysql 基础之CURD

原文:mysql 基础之CURD 增删改查基本语法学习 增: insert Insert 3问: 1: 插入哪张表? 2: 插入哪几列? 3: 这几列分别插入什么值? Insert into TableName (列1,列2....列n) Values (值1,值2,....值n) 值 与 列,按顺序,一一对应 特殊: insert语句 允不允许不写列名 答:允许. …
阅读更多...
小白入门：什么是CURD？

小白入门：什么是CURD？

CRUD是CREATE、READ、UPDATE和DELETE的首字母缩写词&#xff0c;在数据库操作中频繁出现&#xff0c;本文针对小白&#xff0c;如果你已经是开发人员或者对数据库有一定认识的工程师可以默默离开了。让我直接走进CURD的世界。 为什么 CRUD 如此重要&#xff1f; CRUD 经常用于…
阅读更多...
大龄焦虑？如何看待程序员35岁职业危机？

大龄焦虑？如何看待程序员35岁职业危机？

往期精选&#xff08;欢迎转发~~&#xff09; Java全套学习资料&#xff08;14W字&#xff09;&#xff0c;耗时半年整理 消息队列&#xff1a;从选型到原理&#xff0c;一文带你全部掌握 肝了一个月的ETCD&#xff0c;从Raft原理到实践 我肝了三个月&#xff0c;为你写出了…
阅读更多...
Sitemesh前段框架基础

Sitemesh前段框架基础

用sitemesh框架解决项目统一布局的解决方案 Sitemesh装饰框架 Sitemesh项目简介&#xff1a; Sitemesh是一个用来在jsp中实现页面布局和装饰&#xff08;layout and decoration&#xff09;的框架组件&#xff0c;能够帮助网站开发人员较容易实现页面中动态和静态装饰外观的分…
阅读更多...
Sitemesh Demo

Sitemesh Demo

简介 sitemesh是一个网页布局与装饰体系，主要应用于创建具有大量一致性用户界面、导航与布局框架的站点。sitemesh拦截一切经过web server的静态或动态生成的HTML页面请求，处理页面内容，并将其与一个或多个装饰页面进行融合，生成最终页面。sitemesh也可用于构建由多个部分小…
阅读更多...
spring集成sitemesh3

spring集成sitemesh3

1、SiteMesh是什么&#xff1f; SiteMesh是一个网页布局和修饰的框架&#xff0c;利用它可以将网页的内容和页面结构分离&#xff0c;以达到页面结构共享的目的。 SiteMesh是基于Servlet的filter&#xff0c;通过截取response&#xff0c;并进行装饰后再交付给客户。 2、SiteMe…
阅读更多...
sitemesh框架的简单使用(springboot+maven+jsp+sitemesh)

sitemesh框架的简单使用(springboot+maven+jsp+sitemesh)

一 简单介绍 sitemesh是一种模板框架&#xff0c;是为了解决页面重复代码而设计的sitemesh的设计思想是装饰者设计模式 二 简单使用 目录结构&#xff0c;因为我这个项目本来是用来学习flowable的&#xff0c;后面为了方便快速学习&#xff0c;直接把sitemesh集成到这里了&a…
阅读更多...
SiteMesh3简介及使用

SiteMesh3简介及使用

最近项目用到SiteMesh3&#xff0c;研究学习一段时间后决定写篇博文来记录收获。 SiteMesh SiteMesh 介绍工作原理配置及使用 下载1添加maven依赖2webxml中添加SiteMesh过滤器3创建一个装饰页面decorator page4创建一个被装饰页面content page5配置 1XML方式1Java方式 6查看…
阅读更多...
sitemesh初步

sitemesh初步

sitemesh小项目 1.工程目录 2.需要的lib:sitemesh-2.4.2.jar http://wiki.sitemesh.org/wiki/display/sitemesh/Download 3.配置 decorators.xml[sitemesh的配置文件] <?xml version"1.0" encoding"ISO-8859-1"?><!-- 在defaultdir目录…
阅读更多...
SiteMesh框架统一布局用法介绍

SiteMesh框架统一布局用法介绍

SiteMesh 是一个网页布局和修饰的框架&#xff0c;基于 Servlet 中的 Filter&#xff0c;类似于 ASP.NET 中的‘母版页’技术。 介绍&#xff1a; 1&#xff0c;SiteMesh是OpenSymphony团队开发的JEE框架之一,它是一个非常优秀的页面装饰器框架。它通过对所有的用户请求进行过…
阅读更多...
SIteMesh介绍

SIteMesh介绍

转自:http://javauu.com/thread-27-1-1.html 一、SIteMesh介绍 一、SiteMesh简介 SiteMesh是由一个基于Web页面布局、装饰以及与现存Web应用整合的框架。它能帮助我们在由大量页面构成的项目中创建一致的页面布局和外观&#xff0c;如一致的导航条&#xff0c;一致的banner&a…
阅读更多...
【CSRF】学习关于CSRF攻击和防范

【CSRF】学习关于CSRF攻击和防范

文章目录 1.CSRF攻击是什么2.CSRF攻击如何实现2.1 使用GET请求的CSRF的攻击例子2.2 使用post请求的CSRF攻击 3.如何防御CSRF攻击3.1 什么是CSRF令牌3.2 反-CSRF令牌工作流程3.3 同站Cookie策略 4.结论 高质量原文&#xff1a; CSRF Attacks: Anatomy, Prevention, and XSRF To…
阅读更多...
CSRF攻击简述

CSRF攻击简述

一.CSRF是什么&#xff1f; CSRF&#xff08;Cross-site request forgery&#xff09;&#xff0c;中文名称&#xff1a;跨站请求伪造&#xff0c;也被称为&#xff1a;one click attack/session riding&#xff0c;缩写为&#xff1a;CSRF/XSRF。 二.CSRF可以做什么&#xff…
阅读更多...
如何防止CSRF攻击?

如何防止CSRF攻击?

文章目录 一、什么是CSRF&#xff1f;二、CSRF的几种类型1、GET类型的CSRF2、POST类型的CSRF3、链接类型的CSRF 三、CSRF的特点四、防护策略1、同源检测如何阻止外域请求无法确认来源域名情况 2、CSRF Token原理1&#xff09;将CSRF Token输出到页面中2&#xff09;页面提交的请…
阅读更多...
CSRF攻击原理以及防御方法

CSRF攻击原理以及防御方法

CSRF攻击原理以及防御方法 CSRF概念&#xff1a;CSRF跨站点请求伪造(Cross—Site Request Forgery)&#xff0c;跟XSS攻击一样&#xff0c;存在巨大的危害性&#xff0c;你可以这样来理解&#xff1a; 攻击者盗用了你的身份&#xff0c;以你的名义发送恶意请求&#xff0c;对服…
阅读更多...
csrf攻击 java_Web常见攻击手段-CSRF攻击

csrf攻击 java_Web常见攻击手段-CSRF攻击

什么是CSRF攻击&#xff1f; 跨站请求伪造(Cross-Site Request Forgery, CSRF)&#xff0c;恶意网站通过脚本向当前用户浏览器打开的其它页面的 URL 发起恶意请求&#xff0c;由于同一浏览器进程下 Cookie 可见性&#xff0c;导致用户身份被盗用&#xff0c;完成恶意网站脚本中…
阅读更多...
推荐文章

Copyright @ 2022~2023