©2020-2024 ioDraw All rights reserved,
Privacy Policy
你还在为项目中多个页面输入框下拉框样式不统一而苦恼吗，你还在为页面中书写大段重复代码而痛苦吗？那就使用这个组件吧！此组件将输入框和下拉框统一封装，一行代码到处复用！
最近为了统一项目样式，决定将列表头部的输入框和下拉框统一封装，这样无论是哪个页面的输入下拉都看起来一样啦，代码如下：
<template> <div class="component_wapper"> <el-row :gutter="16"> <el-col v-for="
(item, index) in props.searchFormDesc" :key="index" :span="item.layout || 6"> <
slot :name="`search-${item.searchKey}`" :form-data="searchFormData"> <component
:is="item.searchType === 1 ? ElInput : ElSelect" v-model="
searchFormData[item.searchKey]" :placeholder="item.placeholder" clearable
:disabled="item.disabled" :prefix-icon="item.searchType === 1 ? Search : ''"
@change="formDataChange" > <template v-if="item.searchType === 2 && item.option"
#default> <el-option v-for="op in item.option" :key="op[item.optionLabel || '
label']" :value="op[item.optionValue || 'value']" :label="op[item.optionLabel ||
'label']" /> </template> </component> </slot> </el-col> </el-row> </div> </
template> <script lang="ts" setup> import { ref } from 'vue'; import { Search }
from '@element-plus/icons-vue'; import { searchFormDescType } from './index';
import { ElInput, ElSelect } from 'element-plus'; const props = defineProps<{
searchFormDesc: Array<searchFormDescType>; }>(); const emits = defineEmits([
'submit']); //搜索词表单 const searchFormData = ref({}); const formDataChange = () =>
{ emits('submit', searchFormData.value); }; </script> <style scoped lang="scss">
.component_wapper { width: 100%; :deep(.el-row) { width: 100%; } } </style>
ts如下：
export interface searchFormDescType { searchKey: string; //搜索关键字 searchType:
number; //类型：1输入框，2下拉框 placeholder?: string; option?: Array<{
//下拉框通常默认接收为label,value，但是又特殊情况，在此自行传入 [key: string]: string | number | boolean;
}>; //组件占比 layout?: string; disabled?: boolean; // 自定义下拉框label optionLabel?:
string; // 自定义下拉框value optionValue?: string; }
使用方式
注释：
vue3中使用component标签不能直接使用 is=“el-input”，要先引入element-plus中的组件，然后通过判断进行使用
:is=“item.searchType === 1 ? ElInput : ElSelect”
结果：