基于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 *

自动化测试框架[Cypress 常见的“坑”]

Cypress命令是异步的 假设使用Selenium时&#xff0c;有如下这段代码

Unity中颜色空间Gamma与Linear

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

学习笔记,http协议1.0,1.1,2.0之间的差别

文章目录 前言http 1.1与http 1.0http 2.0 与http 1.x注意点 前言 仅做个人学习笔记记录&#xff0c;如有错误&#xff0c;请多多包涵。 学习链接&#xff1a; HTTP 1.0与1.1、2.0之间的区别 面试官&#xff1a;说说 HTTP1.0/1.1/2.0 的区别? http 1.1与http 1.0 http协议1…

用 js 实现 判断两个数组是否相同

文章目录 问题分析 问题 有数组 array1 和 array2 &#xff0c;如何判断这两个数组是否相同 分析 判断两个数组是否相同&#xff0c;你可以检查它们的长度和每个元素是否相等。下面是一个示例代码&#xff1a; function arraysAreEqual(arr1, arr2) {if (arr1.length ! arr2.…

事件溯源模式

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

芯片的测试方法

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

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

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

【GUI】-- 14 GUI编程总结

GUI编程 05 GUI总结 在总结之前&#xff0c;先给出之前的贪吃蛇小游戏全代码。 游戏的主启动类&#xff1a; package com.duo.snake;import javax.swing.*;//游戏的主启动类 public class StartGame {public static void main(String[] args) {JFrame frame new JFrame();…

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;又需要避免恶意攻击或者其他异常情况对系统造成影响。本文将介绍…

npm相关和私有云

安装node时npm会自动安装&#xff0c;npm也可以单独安装。 package.json 在使用npm时&#xff0c;package.json文件是非常重要的&#xff0c;因为它包含了关于项目的必要信息&#xff0c;比如名称、版本、依赖项等。在初始化新项目时&#xff0c;通常会使用npm init命令生成一…

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

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

【青书学堂】 2023年第二学期 HTML5+CSS3(直播课) 作业

【青书学堂】 2023年第二学期 HTML5CSS3(直播课) 作业 为了方便日后复习&#xff0c;青书学堂成人大专试题整理。 若有未整理的课程&#xff0c;请私信我补充&#xff0c;欢迎爱学习的同学们收藏点赞关注&#xff01;文章内容仅限学习使用&#xff01;&#xff01;&#xff01;…

3.OpenFeign的使用

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

Hive中常出现的错误(不定时更新)

1.加载数据失败 hive> load data local inpath /home/user/hive.txt into table studentl> ; FAILED: SemanticException [Error 10001]: Line 1:56 Table not found studentl hive> load data local inpath /home/user/hive.txt into table student; Loading data to…

技术分享| anyRTC之RTN网络

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