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

ops/2024/9/23 22:33:25/

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

相关文章

ubuntu系统安装配置gitlab+Jenkins+发布持续集成持续部署保姆级教程。

ubuntu系统安装配置gitlab+Jenkins+发布持续集成持续部署保姆级教程。

1、服务器环境 名称 系统 IP 备注 gitlab ubuntu20.04.2图形化 192.168.26.130 要求有6G的内存 Jenkins Ubuntu20.04.2图形化 …
阅读更多...
rc_visard 3D Stereo Senso

rc_visard 3D Stereo Senso

1 简介 rc_visard 3D立体视觉传感器 支持的接口标准 GenICam Generic Interface for CamerasGigE Gigabit Ethernet 词汇表 SGM semi-global matching 半全局匹配 SLAM Simultaneous Localization and Mapping 即时定位与地图构建 2 安全 3 硬件规格 坐标系 rc_visar…
阅读更多...
Attention和Transformer灵魂七问

Attention和Transformer灵魂七问

1. 引言 最近&#xff0c;ChatGPT和其他聊天机器人将大语言模型LLMs推到了风口浪尖。这就导致了很多不是学ML和NLP领域的人关注并学习attention和Transformer模型。在本文中&#xff0c;我们将针对Transformer模型结构提出几个问题&#xff0c;并深入探讨其背后的技术理论。这…
阅读更多...
线性回归、逻辑回归

线性回归、逻辑回归

线性回归是一种统计分析方法，它利用数理统计中的回归分析来确定两种或两种以上变量间相互依赖的定量关系。这种分析方法在生活中有着广泛的应用场景，如经济学、市场营销、医学研究、教育评估以及人力资源管理等。其表达形式通常为y = wx+e，其中y是因变量，x是自变量，w是权重…
阅读更多...
Redis 如何实现分布式锁

Redis 如何实现分布式锁

课程地址 单机 Redis naive 版 加锁&#xff1a; SETNX ${lockName} ${value} # set if not exist如果不存在则插入成功&#xff0c;返回 1&#xff0c;加锁成功&#xff1b;否则返回 0&#xff0c;加锁失败 解锁&#xff1a; DEL ${lockName}问题1 2 个线程 A、B&#…
阅读更多...
从零开始：UniApp 项目搭建指南

从零开始：UniApp 项目搭建指南

正文&#xff1a; 在移动应用开发领域&#xff0c;UniApp 作为一款基于 Vue.js 的跨平台框架&#xff0c;为开发者提供了更加便捷的方式来构建同时支持多个平台的应用程序。本文将带领你从零开始&#xff0c;一步步地搭建一个 UniApp 项目&#xff0c;并介绍其中的关键步骤和注…
阅读更多...
HDFS分布式文件存储系统

HDFS分布式文件存储系统

1-1 HDFS的存储机制 按块&#xff08;block&#xff09;存储 hdfs在对文件数据进行存储时&#xff0c;默认是按照128M(包含)大小进行文件数据拆分&#xff0c;将不同拆分的块数据存储在不同datanode服务器上 拆分后的块数据会被分别存储在不同的服务器上 副本机制 为了保证hdfs…
阅读更多...
End to End端对端是什么含义？

End to End端对端是什么含义？

网络有中间结点和端结点&#xff0c;中间结点提供传输服务&#xff0c;端结点接受传输服务。对于Internet 来说&#xff0c;路由器就是中间结点&#xff0c;电脑就是端结点。 下面为了叙述方便&#xff0c;我们把中间结点组成的网络称为网络。那么&#xff0c;网络提供传输服务…
阅读更多...
最新文章

Copyright @ 2022~2023