Vue3——基于tdesign封装一个通用的查询组件

前言

基于Vue3+TS+tdesign封装一个通用的查询组件；

临时写的一个demo

内容

组件代码

<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>

使用

<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>