vue3二次封装element-puls

将表单的通用信息给设置出来

如: label 的提示信息 , type 的类型

// 定义表单的配置项

const formConfig={

formItems:[

{

type:"input",

label:"用户ID",

placeholder:"请输入用户ID"

}

]

}

页面配置如

<template v-for="(item,index) in formConfig.formItems" :key="index">

<el-form-item :label="item.label">

<el-input :placeholder="item.placeholder" />

</el-form-item>

</template>

 

如果定义// 定义表单的配置项

const formConfig={

formItems:[

{

type:"input",

label:"用户ID",

placeholder:"请输入用户ID"

},

{

type:"input",

label:"用户名称",

placeholder:"请输入用户名称"

}

]

}

页面就会出现两个一样的输入框，并且里面的渲染不同

<template>
  <el-form style="max-width: 600px">
    <template v-for="(item, index) in formConfig.formItems" :key="index">
      <el-form-item :label="item.label">
        <!-- v-if="item.type === 'input'" 根据类型判断是下拉框还是输入框  -->

        <!-- 输入框 -->
        <template v-if="item.type === 'input'">
          <el-input :placeholder="item.placeholder" />
        </template>

        <!-- 下拉框 -->
        <template v-else-if="item.type === 'select'">
          <el-select :placeholder="item.placeholder">
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </template>
      </el-form-item>
    </template>
  </el-form>
</template>
<script lang="ts" setup>
import { reactive } from "vue";

//    定义表单的配置项
const formConfig = {
  formItems: [
    {
      type: "input",
      label: "用户ID",
      placeholder: "请输入用户ID",
    },
    {
      type: "select",
      label: "下拉框1",
      placeholder: "请选择内容",
      options: [
        {
          label: "禁用",
          value: 0,
        },
        {
          label: "启用",
          value: 1,
        },
      ],
    },
    {
      type: "input",
      label: "用户名称",
      placeholder: "请输入用户名称",
    },
    {
      type: "select",
      label: "下拉框1",
      placeholder: "请选择内容",
      options: [
        {
          label: "禁用",
          value: 0,
        },
        {
          label: "启用",
          value: 1,
        },
      ],
    },
  ],
};
</script>
<style lang="scss" scoped></style>