基于element-plus定义表单配置化扩展表单按钮

文章目录

  • 前言
  • 一、新增`btn.vue`组件
  • 二、使用
  • 总结
    • `如有启发,可点赞收藏哟~`


前言

在后台管理系统一般都存在列表查询,且可输入数据进行查询

基于element-plus定义表单配置化

新增按钮配置化
在这里插入图片描述


一、新增btn.vue组件

<template><template v-for="(btn, index) in fieldProperty.btns" :key="btn + index"><el-button@click="btn.fun":size="fieldProperty.size":name="btn.name":readonly="btn.readonly":disabled="btn.disabled":type="btn.type":color="btn.color":dark="btn.dark":plain="btn.plain":round="btn.round":circle="btn.circle"><SvgIcon v-if="btn.icon" :icon-class="btn.icon"/>{{ btn.name }}</el-button></template>
</template>
<script lang="ts">
import { computed, reactive } from "vue";
import SvgIcon from "@/components/svg-icon/index.vue";
export default {components: { SvgIcon },name: "Radio",props: {modelvalue: [Boolean],property: {type: Object,default() {return {};},},},setup(props, { emit }) {const fieldProperty = reactive({size: "default", // 'large' | 'default' | 'small'btns: [{fun: () => { console.log('Save') },name: 'Save',readonly: false,disabled: false,type: "primary", // 'primary'| 'success'| 'warning'| 'danger'| 'info'| 'text'(delete)color: "#334343",icon: 'save', // 图标dark: false, // dark 模式, 意味着自动设置 color 为 dark 模式的颜色 和color一起设置plain: false, // 是否为朴素按钮round: false, // 是否为圆角按钮circle: true, // 是否为圆形按钮// loading: false, // 是否为加载中状态// 'loading-icon': 'Loading', // 自定义加载中状态图标组件}],...props.property,});const val = computed({get() {return props.modelvalue;},set(val) {emit("update:modelvalue", val); // 触发},});return {val,fieldProperty,};},
};
</script>
<style lang="less" scoped></style>
  • form.vue新增btn组件引入
import Btn from "@/components/form-configuration/btn.vue";
export default {components: {...Btn},
}

二、使用

  • entity.ts
import { ObjectEntries } from "@/entity/objectentries";
import enableStatus from "@/enum/enable-status";
import type { Rules, DefaultFields, FormData } from "@/interface/form";
import { useI18n } from "vue-i18n";
export class UserSearchFormEntity extends ObjectEntries {public formRules: Rules = {};public formFields: DefaultFields = {};public formData: FormData = {};constructor() {const { t } = useI18n()super()this.formFields = {userName: "",nickName: "",phoneNumber: "",status: "",createDate: [],};this.formData = {userName: {type: "Input",colSize: 8,show: true,class: [],title: t('userName'),field: "userName",property: {type: "text",placeholder: "text",},},nickName: {type: "Input",colSize: 8,show: true,class: [],title: t('nickName'),field: "nickName",property: {type: "text",placeholder: "text",},},phoneNumber: {type: "Input",colSize: 8,show: true,class: [],title: t('phoneNumber'),field: "phoneNumber",property: {type: "text",placeholder: "text",},},status: {type: "Select",colSize: 8,show: true,class: [],title: t('status'),field: "status",property: {data: UserSearchFormEntity.objectEntries(enableStatus),},},createDate: {type: "Date",colSize: 8,show: true,class: [],title: t('createDate'),field: "createDate",property: {type: "daterange",placeholder: "text",},},btn: {type: "Btn",colSize: 8,show: true,class: ['noLabel'],field: "btn",property: {btns: []},},};}
}
  • page/index.ts
import { defineComponent, reactive, ref } from 'vue'
import FormList from "@/components/form-configuration/form.vue";
import { UserSearchFormEntity } from './composables/entity';
import { useI18n } from 'vue-i18n';export default defineComponent({components: {FormList},setup() {const { t } = useI18n()const userSearchFormRef = ref()const userSearchFormEntity = reactive(new UserSearchFormEntity())userSearchFormEntity.formData.btn.property.btns = [{fun: () => {},name: t('search'),type: 'primary',icon: 'search'},{fun: () => {},name: t('reset'),icon: 'refresh',},]return {userSearchFormRef,userSearchFormEntity};},
});
  • page/index.vue
<script lang="ts" src="./index.ts" />
<template><div><FormListclass="register-info-form"ref="userSearchFormRef":fields="userSearchFormEntity.formFields":formData="userSearchFormEntity.formData":rules="userSearchFormEntity.formRules"labelWidth="120px"/></div>
</template><style scoped lang="less"></style>

总结

如有启发,可点赞收藏哟~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/162743.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录算法训练营第四十二天【动态规划part04】 | 01背包、416. 分割等和子集

01背包问题 题目链接&#xff1a; 题目页面 求解思路&#xff1a; 确定dp数组及其下标含义&#xff1a;dp[i][j] 表示从下标为 [0] 到 [i] 的物品里任意选取&#xff0c;放进容量为j的背包&#xff0c;此时的价值总和最大值确定递推公式&#xff1a; 不放物品i&#xff0c;…

centos查看空间使用情况

查看磁盘使用空间 df -h 查看该目录下其他目录的大小 du -sh *

Unity中颜色空间Gamma与Linear

文章目录 前言一、人眼对光照的自适应1、光照强度与人眼所见的关系2、巧合的是&#xff0c;早期的电子脉冲显示屏也符合这条曲线3、这两条曲线都巧合的符合 y x^2.2^&#xff08;Gamma2.2空间&#xff09; 二、Gamma矫正1、没矫正前&#xff0c;人眼看电子脉冲显示屏&#xff…

事件溯源模式

概念解释 事件溯源&#xff08;Event Sourcing&#xff09;是一种设计模式&#xff0c;其核心思想是将系统的状态变化表示为一系列不可变的事件&#xff0c;并将这些事件存储在事件日志中。系统的当前状态可以通过重新应用&#xff08;回放&#xff09;这些事件来还原&#xf…

芯片的测试方法

半导体的生产流程包括晶圆制造和封装测试&#xff0c;在这两个环节中分别需要完成晶圆检测(CP, Circuit Probing)和成品测试(FT, Final Test)。无论哪个环节&#xff0c;要测试芯片的各项功能指标均须完成两个步骤&#xff1a;一是将芯片的引脚与测试机的功能模块连接起来&…

促进材料基因工程基础理论、前沿技术和关键装备的发展和应用,第七届材料基因工程高层论坛将于12月重庆举办,龙讯旷腾出席会议

为了进一步促进材料基因工程基础理论、前沿技术和关键装备的发展和应用&#xff0c;加强国际交流&#xff0c;加速我国新材料的研发和应用&#xff0c;由中国材料研究学会、西部科学城重庆高新区管理委员会主办&#xff0c;重庆大学、北京科技大学、北京云智材料大数据研究院等…

Java面试-微服务篇-SpringCloud

Java面试-微服务篇-SpringCloud SpringCloud 常见组件注册中心Eureka, Nacos负载均衡Ribbon服务雪崩, 熔断降级微服务的监控来源 SpringCloud 常见组件 通常情况下 Eureka: 注册中心Ribbon: 负载均衡Feign: 远程调用Hystrix: 服务熔断Zuul/Gateway: 网关 SpringCloudAlibaba…

【开源】基于Vue.js的天然气工程运维系统的设计和实现

项目编号&#xff1a; S 022 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S022&#xff0c;文末获取源码。} 项目编号&#xff1a;S022&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统角色分类2.2 核心功能2.2.1 流程…

服务限流算法:从令人头疼到信手拈来

前言 随着系统规模的扩大和用户量的增加&#xff0c;服务限流成为了一个非常重要的话题。一方面&#xff0c;系统需要能够处理大量的请求&#xff0c;不至于因为负载过高而崩溃&#xff1b;另一方面&#xff0c;又需要避免恶意攻击或者其他异常情况对系统造成影响。本文将介绍…

pip安装python包到指定python版本下

python -m pip install 包名1.命令行进入到指定python安装目录。比如我电脑上有python3.8也有python3.9。准备给python3.9安装指定的包

3.OpenFeign的使用

OpenFeign 文章目录 OpenFeign一. 什么是OpenFeign二. OpenFeign基础使用1.添加依赖2.配置Nacos配置信息3.在项目中开启OpenFeign4.编写OpenFeign调用代码5.调用OpenFeign接口 三. OpenFeign内置的超时重试机制1.配置超时重试2.覆盖Retryer对象 四.自定义超时重试机制1.自定义超…

技术分享| anyRTC之RTN网络

RTN(Real-time Network)中文名&#xff1a;实时音视频传输网络。 RTN是最近几年由各大RTC的云厂商提出的一个全新架构的音视频实时传输网络概念。类似于直播的CDN网络&#xff0c;RTN是对音视频的实时性又强烈要求的场景而设计的&#xff0c;原理上全球端到端的时延通过RTN网络…

JSP EL表达式获取list/Map集合与java Bean对象

上文 JSP EL表达式基本使用 中 我们对EL表达式做了一个基本的了解 也做了基础的字符串数据使用 那么 我们可以来看一下我们的集合 首先 list 这个比较简单 我们直接这样写代码 <% page import"java.util.ArrayList" %> <% page import"java.util.Lis…

基于C#实现优先队列

一、堆结构 1.1性质 堆是一种很松散的序结构树&#xff0c;只保存了父节点和孩子节点的大小关系&#xff0c;并不规定左右孩子的大小&#xff0c;不像排序树那样严格&#xff0c;又因为堆是一种完全二叉树&#xff0c;设节点为 i,则 i/2 是 i 的父节点&#xff0c;2i 是 i 的…

信息系统的安全保护等级的五个级别

信息系统的安全保护等级分为五级&#xff1a;第一级为自主保护级、第二级为指导保护级、第三级为监督保护级、第四级为强制保护级、第五级为专控保护级。 法律依据&#xff1a;《信息安全等级保护管理办法》第四条 信息系统的安全保护等级分为以下五级&#xff1a;   &#…

【C语言】计算实时太阳角度(高度角、方位角),以及使用stm32单片机实时获取时间戳

整体计算方法 在编写该代码的过程中寻找了多篇博文和论文&#xff0c;综合所有文章且按网上的以0时的方位角的0&#xff0c;且随时间累加累加至360度。我修改了博文和论文的一些角度的计算方法。得到一下代码与网站计算的方位角相互验证过&#xff0c;误差不超过1 验证网站 太…

LoRaWAN 中国地区文件详细解读

目录 一、LoRaWAN简介 二、CN470-510地区参数分析 1.信道频率 2.支持功率 3.支持空速 4.最大负载大小 5.接受窗口参数 三、CN470_510默认参数 Lora LoraWAN教程 一、LoRaWAN简介 LoraWAN是一种基于LoRa远距离通信技术配套设计的一套通讯协议和系统架构。LoRaWAN网络通…

Java实现拼图游戏

1、了解拼图游戏基本功能&#xff1a; 拼图游戏内容由若干小图像块组成的&#xff0c;通过鼠标点击图像块上下左右移动&#xff0c;完成图像的拼凑。 2、拼图游戏交互界面设计与开发&#xff1a; 通过创建窗体类、菜单、中间面板和左右面板完成设计拼图的交互界面 &#xff…

外贸自建站服务器怎么选?网站搭建的工具?

外贸自建站服务器用哪个好&#xff1f;如何选海洋建站的服务器&#xff1f; 外贸自建站是企业拓展海外市场的重要手段之一。而在这个过程中&#xff0c;选择一个适合的服务器对于网站的稳定运行和优化至关重要。海洋建站将为您介绍如何选择适合的外贸自建站服务器。 外贸自建…