vue3组件封装系列-表单请求

embedded/2024/10/18 21:24:44/

我们在开发一些后台管理系统时，总是会写很多的列表查询页面，如果不封装组件，就会无限的复制粘贴，而且页面很冗余，正常情况下，我们都是要把组件进行二次封装，来达到我们想要效果。这里我分享一下我近期封装的关于列表的组件封装。
vue3+element-plus

表单组件

src\components\TableSeach

<template><div class="table-search-root"><el-formref="searchForm"class="table-search__form":model="formData"size="default"label-width="128px"v-bind="formProps"><!-- 查询表单模块 --><el-row class="table-search__row"><el-colv-for="(field, index) in fields":key="field.prop"class="table-search__col":class="{ 'form__item--hidden': shouldCollapse(index) }":xl="6":lg="8":md="12":sm="24"><el-form-item :label="field.label" :prop="field.prop"><slot v-if="$slots[field.prop]" :name="field.prop"></slot><componentv-else:is="field.type"v-model.trim="formData[field.prop]":placeholder="defaultPlaceHolder(field)"v-bind="getFormFieldProps(field.type, field.props)"><template v-if="field.type === FieldsType.SELECT"><el-optionv-for="option in field.options":key="option.value":label="option.label":value="option.value"/></template></component></el-form-item></el-col><!-- 操作按钮模块 --><div class="table-search__btns"><el-button type="primary" :loading="props.loading" @click="handleSearch">查询</el-button><el-button :loading="props.loading" @click="handleReset"> 重置 </el-button><spanv-if="showCollapseBtn"class="table-search__btn--filter ml-28"@click="toggleCollapse">{{ isCollapse ? '展开' : '收起' }}<el-icon color="#c0c4cc" v-show="isCollapse"><CaretBottom /></el-icon><el-icon color="#c0c4cc" v-show="!isCollapse"><CaretTop /></el-icon></span></div></el-row></el-form></div>
</template>
<script lang="ts">
// 解决组件不渲染问题---使用的是自动引入方式，不知为何有bug，暂时只能用这种方式解决，有好办法的也可以分享一下 
import {ElInput,ElInputNumber,ElSelect,ElTimePicker,ElTimeSelect,ElDatePicker
} from 'element-plus';
export default {components: {ElInput,ElInputNumber,ElSelect,ElTimePicker,ElDatePicker,ElTimeSelect}
};
</script>
<script setup lang="ts">
import { type PropType, ref, toRefs, computed } from 'vue';
import defaultFieldsProps from './defaultFieldsProps';
const FieldsType = {INPUT: 'el-input',SELECT: 'el-select'
};
type filed = {prop: string;label?: string;type?: string;options?: any[];[propName: string]: any;
};
interface size {width: number;quantity: number;
}
// 不同尺寸所对应的页面宽度和每行 ElFormItem 个数
const DifferentSizeData = [{ width: 1900, quantity: 4 }, // xl{ width: 1200, quantity: 3 }, // large{ width: 992, quantity: 2 }, // middle{ width: 768, quantity: 1 }, // small{ width: 0, quantity: 1 } // less than small
];
const props = defineProps({modelValue: {type: Object,default: () => ({})},formProps: {type: Object,default: () => ({})},fields: {type: Array as PropType<filed[]>,default: () => []},defaultCollapse: {type: Boolean,default: false},loading: {type: Boolean,default: false}
});
const formData: { [key: string]: any } = defineModel();
const emit = defineEmits(['search', 'reset']);
const { defaultCollapse, fields, formProps } = toRefs(props);
const isCollapse = ref(true);
isCollapse.value = defaultCollapse.value;
const searchForm = ref<any>(null);
const showCollapseBtn = computed(() => {const quantity = getPerLineItemQuantity();return fields.value.length >= quantity;
});
const getFormFieldProps = (fieldType: any, props: any) => {const defaultProps: { [key: string]: any } = defaultFieldsProps;return { ...defaultProps[fieldType], ...props };
};
const shouldCollapse = (index: any) => {const quantity = getPerLineItemQuantity();return index > quantity - 2 && isCollapse.value;
};
const getPerLineItemQuantity = () => {const documentScrollWidth = document.documentElement.scrollWidth;const size = DifferentSizeData.find((item) => documentScrollWidth >= item.width);return (size as size).quantity;
};
const defaultPlaceHolder = (field: any) => {const newLabel = field.label.replace(':', '').replace('：', '');return field.type === FieldsType.SELECT ? `请选择${newLabel}` : `请输入${newLabel}`;
};
const toggleCollapse = () => {isCollapse.value = !isCollapse.value;
};
const handleSearch = () => {emit('search', formData.value);
};
const handleReset = () => {searchForm.value.resetFields();emit('reset', formData.value);
};
const handleResetForm = () => {searchForm.value.resetFields();
};
defineExpose({handleResetForm
});
</script>
<style lang="scss" scoped>
/**  查询表单模块样式  **/
.table-search__form {display: flex;flex-wrap: wrap;
}.table-search__row {width: 100%;
}.table-search__col:last-of-type {margin-bottom: 0;
}:deep(.el-form-item__label) {width: 128px;white-space: nowrap;overflow: hidden;font-weight: 400;font-size: 14px;color: #282828;
}:deep(.el-select),
:deep(.el-cascader),
:deep(.el-date-editor--daterange.el-input),
:deep(.el-date-editor--daterange.el-input__inner),
:deep(.el-date-editor--timerange.el-input),
:deep(.el-date-editor--timerange.el-input__inner),
:deep(.el-date-editor--datetimerange.el-input),
:deep(.el-date-editor--datetimerange.el-input__inner) {width: 100%;
}:deep(.el-date-editor .el-range-separator) {width: auto;
}.form__item--hidden {display: none;
}/**  操作按钮模块样式  **/
.table-search__btns {margin-left: auto;margin-bottom: 16px;
}.table-search__btn--filter {font-size: 14px;color: #606266;cursor: pointer;
}/**  功能样式  **/
.ml-28 {margin-left: 28px;
}
</style>

src\components\TableSeach\defaultFieldsProps.ts

export default {'date-picker': {valueFormat: 'x',},XXXXX这里写一些项目公共的想要特殊处理的参数
};

表单组件就是这样

使用效果

收起状态
在这里插入图片描述

展开状态
在这里插入图片描述

使用方式

<template><TableSeachv-model="searchQuery"ref="TableSeach":fields="serchFields":formProps="{labelWidth: '120px'}":loading="loading.tableLoading"@search="handleQuery"@reset="handleQuery"><template #staff_ids>基础组件无法实现的情况下可以用插槽的方式添加其他组件用以实现</template><template #tags>基础组件无法实现的情况下可以用插槽的方式添加其他组件用以实现</template></TableSeach>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import TableSeach from '@/components/TableSeach/index.vue';const searchQuery = ref({xxxxxxx:xxxxx
});
const loading = ref({tableLoading: false
});onMounted(() => {handleQuery();
});
const handleQuery = async () => {xxxxxxxxxxx
};const serchFields = [{label: 'xxxxxx',prop: 'time',type: FormType.DATE_PICKER,props: {type: 'daterange',startPlaceholder: '开始日期',endPlaceholder: '结束日期',disabledDate: disabledDate, valueFormat: YMD}},{label: 'xxxxxxx',prop: 'staff_ids'},{label: 'xxxxx',prop: 'tags'},{label: 'xxxxxx',prop: 'loss',type: FormType.SELECT,options: [{ value: -1, label: '全部' }, ...dynamicList]},{label: 'xxxxxx',prop: 'del_staff_id',type: FormType.SELECT,options: staffOptions.value,props: {filterable: true,remote: true,loading: loading.value.staffLoading,remoteMethod: remoteStaffMethod}},xxxxxxxxxxxxxxxx
]
</script>

如上，除了部分参数key是需要固定以外，其余element本身自带的参数也全部可以使用props传入，特殊需求在组件不满足情况下也可以使用插槽形式更改显示

本示例只是简单写了一下，在某些情况下需要传入参数也可以将serchFields改为function接收参数

有什么问题的欢迎提出，也欢迎大佬指出不足之处


http://www.ppmy.cn/embedded/10064.html

相关文章

基于Springboot的学生毕业离校系统

基于Springboot的学生毕业离校系统

基于SpringbootVue的学生毕业离校系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatis工具&#xff1a;IDEA、Maven、Navicat 系统展示 用户登录 网站首页 离校流程 网站公告 留言反馈 后台登录 学生管理 教师管理 离校流程…
阅读更多...
基于spring boot的摄影跟拍预定管理系统

基于spring boot的摄影跟拍预定管理系统

基于spring boot的摄影跟拍预定管理系统设计与实现 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开…
阅读更多...
Day11-Java进阶-HashSet集合LinkedHashSet-Collection工具类Map集合

Day11-Java进阶-HashSet集合LinkedHashSet-Collection工具类Map集合

1. HashSet集合 HashSet-JDK8版本及以后-面试常问 2. LinkedHashSet-Collection工具类 2.1 LinkedHashSet 2.2 Collection工具类 3. Map集合 3.1 Map接口介绍 3.2 Map 集合的遍历方式 3.2.1 三种方式介绍 package com.itheima.map;import java.util.HashMap; import java.ut…
阅读更多...
Centos7.9云计算CloudStack4.15 高级网络配置（3）

Centos7.9云计算CloudStack4.15 高级网络配置（3）

上两章的文章都是用的CloudStack的基本网络&#xff0c;这一篇我们来介绍CloudStack的高级网络&#xff0c;这里虚拟机用的是自己配置的内部网络&#xff0c;通过nat方式到物理网络。按照第一篇的文章&#xff0c;安装管理服务器和计算服务器。 并且在管理服务器配置好如下的全…
阅读更多...
ospf的工作过程和特点

ospf的工作过程和特点

OSPF&#xff08;Open Shortest Path First&#xff09;是一种内部网关协议&#xff08;Interior Gateway Protocol&#xff09;&#xff0c;用于路由器之间交换路由信息&#xff0c;从而在自治系统内计算数据的最短传输路径。其工作原理基于链路状态路由算法&#xff0c;具体过…
阅读更多...
CountDownLatch倒计时器源码解读与使用

CountDownLatch倒计时器源码解读与使用

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1. 前言 2. CountDownLatch有什么用 3. CountDownLatch底层原理 3.1. count…
阅读更多...
项目大集成

项目大集成

一 keeplived 高可用 192.168.11.11nginx keeplived192.168.11.12nginx keeplived 两台均编译安装服务器 1 主服务器修改文件&#xff1a; 2 备服务器修改文本 scp keepalived.conf 192.168.11.12:/etc/keepalived/ 3 给主服务器添加虚拟ip ifconfig ens33:0 192.168…
阅读更多...
milvus服务安装bash脚本指令理解

milvus服务安装bash脚本指令理解

下拉镜像&#xff1a;docker pull milvusdb/milvus:v2.4.0-rc.1下载文件&#xff1a;https://hub.yzuu.cf/milvus-io/milvus/blob/master/scripts/standalone_embed.sh安装启动&#xff1a;bash standalone_embed.sh start详细解释下这段代码&#xff1a;wait_for_milvus_runni…
阅读更多...
最新文章

Copyright @ 2022~2023