前言
基于Vue3 TS tdesign封装一个通用的查询组件；
临时写的一个demo
内容
组件代码
代码语言：javascript复制<template>
<t-form ref="form" :model="formData" layout="inline" colon>
<t-row>
<t-col :span="10">
<t-row :gutter="[24, 24]">
<t-col v-for="item in formConfig" :key="item.name" :span="item.span || 4">
<t-form-item :label="item.label">
<component
:is="item.type"
v-model="formData[item.name]"
:options="item.options"
:min-collapsed-num="item.minCollapsedNum"
:multiple="item.multiple"
:placeholder="item.placeholder"
:mode="item.mode"
>
>
</component>
</t-form-item>
</t-col>
</t-row>
</t-col>
<t-col :span="2" class="operation-container">
<t-button theme="primary" @click="submitForm">提交</t-button>
<t-button theme="default" variant="base" @click="resetForm">重置</t-button>
</t-col>
</t-row>
</t-form>
</template>
<script setup lang="ts">
import { defineProps, ref } from 'vue';
interface Props {
formConfig: Array<{
type: string; // 组件类型
label: string; // 组件标题
name: string; // 表单列的名称
span?: number; // 组件宽度,默认为4[可选参数]
multiple?: boolean; // 是否可以选择多个值[可选参数]
placeholder?: string; // 输入框 placeholder[可选参数]
options?: any[]; // 选项参数[可选参数]
minCollapsedNum?: number; // select最小隐藏项数量[可选参数]
mode?: string; // 日期选择模式[可选参数]
}>;
}
defineProps<Props>();
const emit = defineEmits(['submit']);
// NOTE timeRange需要事先定义好类型
const formData = ref({ timeRange: [] });
const form = ref(null);
const submitForm = () => {
emit('submit', formData);
};
const resetForm = () => {
formData.value = { timeRange: [] };
emit('submit', formData);
};
</script>
<style lang="less" scoped>
.operation-container {
display: flex;
justify-content: flex-end;
align-items: center;
.expand {
.t-button__text {
display: flex;
align-items: center;
}
}
}
</style>使用
代码语言：javascript复制<template>
<search-form :form-config="formConfig" @submit="onSubmit"></search-form>
</template>
<script setup lang="ts">
import searchForm from '@/components/form/search/index.vue';
const formConfig = [
{
type: 't-input',
label: '名称',
name: 'name',
placeholder: '请输人名称',
},
{
type: 't-date-picker',
label: '单选时间',
name: 'time',
presets,
},
{
type: 't-date-range-picker',
label: '范围时间',
name: 'timeRange',
},
{
type: 't-select',
label: '选项单选',
name: 'select',
options: [
{ label: '密码登录', value: 'PASSWORD' },
{ label: '验证码登录', value: 'CODE' },
{ label: '免密登录', value: 'SAFE' },
],
},
{
type: 't-select',
label: '选项多选',
name: 'selectMultiple',
multiple: true,
minCollapsedNum: 1,
options: [
{ label: '密码登录', value: 'PASSWORD' },
{ label: '验证码登录', value: 'CODE' },
{ label: '免密登录', value: 'SAFE' },
],
},
];
const onSubmit = (formData) => {
console.log('父组件', formData.value);
};
</script>
