VUE3+Element-Plus form表单封装

新建form组件页面

在components中创建新组件，将需要的form表单中常用的UI组件引入；
vue3创建组件和vue2中多少有点区别，但是影响不是很大，也好理解；
获取到父组件传过来的数据，循环el-form-item标签，我这里是为了满足UI设计图需求，循环了布局容器中的el-col标签，固定数值，循环超出会自动换行，不用担心页面错乱

<template>
  <form :model="props.ruleForm">
    <el-row :gutter="20">
      <el-col :span="8" v-for="item in props.formData" :key="item.key">
        <el-form-item :label="item.label" :prop="item.key"  label-width="120px">
          <!-- 输入框 -->
          <el-input
            v-if="item.type == 'input'"
            v-model="props.ruleForm[item.key]"
            :placeholder="item.placeholder"
            clearable
          />
          <!-- 下拉选择框 -->
          <el-select
            v-if="item.type == 'select'"
            v-model="props.ruleForm[item.key]"
            :placeholder="item.placeholder"
            clearable
          >
            <el-option
              v-for="items in item.list"
              :key="items.value"
              :label="items.label"
              :value="items.value"
            />
          </el-select>
          <!-- 时间选择 -->
          <el-date-picker
            v-if="item.type == 'date'"
            v-model="props.ruleForm[item.key]"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </form>
</template>

<script setup>
import { ref, reactive } from 'vue'
const props = defineProps({
  formData: {
    type: Array,
    default: []
  },
  ruleForm: {
    type: Object,
    default: {}
  }
})
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.el-form-item,
.el-input,
.el-form-item__label,
.el-date-editor {
  height: 40px !important;
  line-height: 40px !important;
}
</style>

创建index.vue

页面中直接引入form组件，数组form.formData中，根据需要的组件写入对应的type值，方便组件判断；
form.ruleForm的作用在于方便获取组件页的数据这里不做过多解释（代码复制可直接使用查看）

<template>
  <div>
    <div class="wrap_top">
      <s-form :formData="form.formData" :ruleForm="form.ruleForm"></s-form>
      <div class="jut">
        <div class="wrap_btn">
          <el-button type="primary" @click="tatps">筛选</el-button>
          <el-button plain>导出</el-button>
          <el-button type="info" plain>重置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
//引入form封装组件
import sForm from '@/components/forms'
import { ref, reactive} from 'vue'
let calssOptions = reactive([
  {
    label: '测试',
    value: 'A'
  }
])
let ageOptions = reactive([])
let TypeOptions = reactive([])
let form = reactive({
  formData: [
    {
      type: 'input',
      key: 'item',
      label: '图书编码',
      placeholder: '请输入/扫描图书编码'
    },
    {
      type: 'select',
      key: 'classify_id',
      label: '图书类别',
      placeholder: '请选择图书类别',
      list: calssOptions
    },
    {
      type: 'date',
      key: 'gmt_create_start',
      label: '入库时间',
      placeholder: '请选择图书状态'
    }
  ],
  ruleForm: {
    gmt_create_start: []
  }
})
const page = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 筛选
const tatps = () => {
	console.log(form.ruleForm)
}

</script>

<style lang="scss" scoped>
.wrap_top {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
}
</style>

严格来说第一次写博客，大家有什么不合适的可以直接私信或者评论，我有时间会回复，也可以讨论讨论技术，最后，谢谢大家阅览