• form组件的封装（element ui ） 简单版本

    当你使用Vue.js构建Web应用时，封装可复用组件是提高开发效率和代码可维护性的关键之一。在这篇文章中，我们将探讨如何使用Vue.js来创建一个通用的表单组件，以及如何将它封装成一个可配置的组件。

    实现思路

    • 拿下表单模板
    • 一个个的改造（文本，下拉，单选，复选等）
    • 按钮
    • 默认值的设定
    • rules规则的处理

    创建通用的form组件

    这段代码是一个Vue.js组件，用于创建一个动态表单。以下是对代码的简要解释：

    1. 在模板部分，使用``创建一个表单，绑定了`ruleForm`对象作为数据模型和`rules`对象作为验证规则。
    2. 使用`v-for`循环遍历`data.items`，根据每个`item`的类型创建不同的表单元素，如输入框、选择框、开关、多选框、单选框、文本域、日期选择器和时间选择器。
    3. 在`<el-form-item>`内部，根据`item.type`的不同，使用Vue指令`v-if`来渲染不同的表单元素。
    4. 在脚本部分，定义了一个Vue组件，接受一个`data`对象作为属性传递进来，初始化了`ruleForm`和`rules`对象。
    5. 在`created`生命周期钩子中，调用`init`方法初始化表单的默认值和验证规则。
    6. `init`方法根据每个`item`的类型，将默认值设置到`ruleForm`中。
    7. 定义了`callSeif`方法，用于处理按钮的点击事件，包括提交表单和重置表单。
    8. `submitForm`方法通过`validate`函数验证表单的有效性，如果通过验证，则执行回调函数。
    9. `resetForm`方法用于重置表单，根据不同的表单元素类型清空表单字段。

    这段代码用于创建一个可配置的动态表单，通过传入不同的配置数据，可以生成不同类型的表单，并在用户交互时执行相应的操作。这是一个强大的工具，可用于快速构建各种表单页面。如果需要更详细的文章，请提供具体的方向或问题。

    1. <template>
    2.   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="data.width">
    3.     <el-form-item :label="item.label" :prop="item.prop" v-for="(item, k) in data.items" :key="k">
    4.       <el-input v-if="item.type == 'Input'" v-model="ruleForm[item.prop]" :placeholder="item.placeholder"
    5.         :style="{ width: item.width }"></el-input>
    6.       <el-select v-model="ruleForm[item.prop]" v-if="item.type == 'Select'" :placeholder="item.placeholder"
    7.         :style="{ width: item.width }">
    8.         <el-option v-for="(o, i) in item.options" :label="o.label" :value="o.value" :key="i"></el-option>
    9.       </el-select>
    10.       <el-switch v-model="ruleForm[item.prop]" v-if="item.type == 'Switch'"></el-switch>
    11.       <el-checkbox-group v-model="ruleForm[item.prop]" v-if="item.type == 'Checkbox'">
    12.         <el-checkbox :label="o.value" v-for="(o, i) in item.options" :key="i">{{
    13.           item.label
    14.         }}</el-checkbox>
    15.       </el-checkbox-group>
    16.       <el-radio-group v-model="ruleForm[item.prop]" v-if="item.type == 'Radio'">
    17.         <el-radio :label="o.value" v-for="(o, i) in item.options" :key="i">{{
    18.           item.label
    19.         }}</el-radio>
    20.       </el-radio-group>
    21.       <el-col :span="item.span || 11">
    22.         <el-input v-if="item.type == 'Textarea'" v-model="ruleForm[item.prop]" :placeholder="item.placeholder"
    23.           type="textarea"></el-input>
    24.       </el-col>
    25.       <el-col :span="item.span || 5">
    26.         <el-date-picker type="date" style="width: 100%" v-model="ruleForm[item.prop]" :placeholder="item.placeholder"
    27.           v-if="item.type == 'Date'"></el-date-picker></el-col>
    28.       <el-col :span="item.span || 5">
    29.         <el-time-picker style="width: 100%" v-model="ruleForm[item.prop]" :placeholder="item.placeholder"
    30.           v-if="item.type == 'Time'"></el-time-picker></el-col>
    31.       <el-col :span="item.span || 5">
    32.         <el-date-picker type="datetime" style="width: 100%" v-model="ruleForm[item.prop]" :placeholder="item.placeholder"
    33.           v-if="item.type == 'Datetime'"></el-date-picker></el-col>
    34.     </el-form-item>
    35.     <el-form-item>
    36.       <el-button :type="b.type" @click="callSeif('ruleForm', b.action, b.call)" v-for="(b, k) in data.buttons" :key="k">{{
    37.         b.label }}</el-button>
    38.     </el-form-item>
    39.   </el-form>
    40. </template>
    41. <script>
    42. export default {
    43.   props: {
    44.     data: Object,
    45.   },
    46.   name: "Form",
    47.   data() {
    48.     return {
    49.       ruleForm: {},
    50.       rules: {},
    51.     };
    52.   },
    53.   created() {
    54.     this.init();
    55.   },
    56.   methods: {
    57.     init() {
    58.       let form = {};
    59.       let box = [];
    60.       this.data.items.forEach((item) => {
    61.         switch (item.type) {
    62.           case "Checkbox":
    63.             if (item.default) {
    64.               if (Array.isArray(item.default)) {
    65.                 box = box.concat(item.default);
    66.               } else {
    67.                 box.push(item.default);
    68.               }
    69.             }
    70.             form[item.prop] = box;
    71.             break;
    72.           case "Datetime":
    73.             if (item.default) {
    74.               form[item.prop] = new Date(item.default);
    75.             }
    76.             break;
    77.           case "Time":
    78.             if (item.default) {
    79.               form[item.prop] = new Date(item.default);
    80.             }
    81.             break;
    82.           case "Date":
    83.             if (item.default) {
    84.               form[item.prop] = new Date(item.default);
    85.             }
    86.             break;
    87.           default:
    88.             form[item.prop] = item.default;
    89.             break;
    90.         }
    91.       });
    92.       this.ruleForm = form;
    93.       console.log(form);
    94.       this.rules = this.data.rules
    95.     },
    96.     callSeif(formName, action, callback) {
    97.       if (action == "submit") {
    98.         this.submitForm(formName, callback);
    99.       } else if (action == "reast") {
    100.         this.resetForm(formName);
    101.       } else {
    102.         callback && callback();
    103.       }
    104.     },
    105.     submitForm(formName, callback) {
    106.       this.$refs[formName].validate((valid) => {
    107.         if (valid) {
    108.           callback && callback(this.ruleForm);
    109.         } else {
    110.           console.log("error submit!!");
    111.           return false;
    112.         }
    113.       });
    114.     },
    115.     resetForm(formName) {
    116.       console.log("重置",);
    117.       let form = {};
    118.  
    119.       this.data.items.forEach((item) => {
    120.         switch (item.type) {
    121.           case "Checkbox":
    122.             form[item.prop] = [];
    123.             break;
    124.           default:
    125.             form[item.prop] = '';
    126.             break;
    127.         }
    128.       });
    129.       this.ruleForm = form;
    130.       this.$refs[formName].resetFields();
    131.       console.log(this.ruleForm);
    132.     },
    133.   },
    134. };
    135. </script>

    如何使用这个组件

    现在，让我们看看如何在Vue.js应用中使用这个通用的表单组件。首先，你需要导入这个组件并注册它，然后可以在模板中使用它。

    1. <template>
    2.   <div class="table-page">
    3.     <Form :data="formData"></Form>
    4.   </div>
    5. </template>
    6. <script>
    7. import Form from "./componentsdemo/form.vue";
    8. export default {
    9.   name: "Index",
    10.   components: {
    11.     Form,
    12.   },
    13.  
    14.   data() {
    15.     return {
    16.       formData: {
    17.         width: "180px",
    18.         items: [
    19.           {
    20.             type: "Input",
    21.             label: "活动名称",
    22.             prop: "name",
    23.             width: "100px",
    24.             placeholder: "请输入活动区域",
    25.             default: "请",
    26.           },
    27.           {
    28.             type: "Select",
    29.             placeholder: "请选择活动区域",
    30.             prop: "region",
    31.             label: "活动区域",
    32.             options: [
    33.               {
    34.                 label: "区域一",
    35.                 value: "shanghai",
    36.               },
    37.               {
    38.                 label: "区域二",
    39.                 value: "beijing",
    40.               },
    41.             ],
    42.             default: "shanghai",
    43.           },
    44.           {
    45.             type: "Switch",
    46.             label: "即时配送",
    47.             prop: "delivery",
    48.             default: true,
    49.           },
    50.           {
    51.             type: "Checkbox",
    52.             label: "活动性质",
    53.             prop: "type",
    54.             options: [
    55.               {
    56.                 label: "线下主题活动",
    57.                 value: "1",
    58.               },
    59.               {
    60.                 label: "单纯品牌曝光",
    61.                 value: "2",
    62.               },
    63.             ],
    64.             default: ["1", "2"],
    65.           },
    66.           {
    67.             type: "Radio",
    68.             label: "特殊资源",
    69.             prop: "resource",
    70.             options: [
    71.               {
    72.                 label: "线下主题活动",
    73.                 value: "a",
    74.               },
    75.               {
    76.                 label: "单纯品牌曝光",
    77.                 value: "b",
    78.               },
    79.             ],
    80.             default: 'a',
    81.           },
    82.           {
    83.             type: "Textarea",
    84.             label: "活动形式",
    85.             prop: "desc",
    86.             placeholder: "请输入活动形式",
    87.             span: 10,
    88.             default: '活动',
    89.           },
    90.           {
    91.             type: "Date",
    92.             label: "活动日期",
    93.             prop: "data1",
    94.             placeholder: "请输入活动日期",
    95.             span: 10,
    96.             default: '2023-08-21',
    97.           },
    98.           {
    99.             type: "Time",
    100.             label: "活动时间",
    101.             prop: "data2",
    102.             placeholder: "请输入活动时间",
    103.             span: 10,
    104.             default: '2023-08-21 12:00:00',
    105.           },
    106.           {
    107.             type: "Datetime",
    108.             label: "活动日期时间",
    109.             prop: "data3",
    110.             placeholder: "请输入活动日期时间",
    111.             span: 10,
    112.             default: '2023-08-21 12:00:00',
    113.           },
    114.         ],
    115.         buttons: [
    116.           {
    117.             label: "确定",
    118.             type: "text",
    119.             action: "submit",
    120.             call: (Form) => {
    121.               console.log(Form);
    122.             },
    123.           },
    124.           {
    125.             label: "重置",
    126.             type: "text",
    127.             action: "reast",
    128.             call: () => {
    129.               console.log("reast");
    130.             },
    131.           },
    132.         ],
    133.         rules: {
    134.           // name: [
    135.           //   { required: true, message: "请输入活动名称", trigger: "blur" },
    136.           //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
    137.           // ],
    138.           region: [{ required: true, message: "请选择活动区域", trigger: "change" }],
    139.           date1: [
    140.             { type: "date", required: true, message: "请选择日期", trigger: "change" },
    141.           ],
    142.           date2: [
    143.             { type: "date", required: true, message: "请选择时间", trigger: "change" },
    144.           ],
    145.           type: [
    146.             {
    147.               type: "array",
    148.               required: true,
    149.               message: "请至少选择一个活动性质",
    150.               trigger: "change",
    151.             },
    152.           ],
    153.           resource: [{ required: true, message: "请选择活动资源", trigger: "change" }],
    154.           desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
    155.  
    156.         }
    157.       },
    158.     };
    159.   },
    160.   methods: {},
    161. };
    162. </script>

    在上述示例中，我们首先导入了通用下拉选择框组件，然后在模板中使用它，并将需要的数据传递给它。当选择项发生变化时，我们可以通过@change事件来处理选择结果。

    结语

    通过封装通用组件，我们可以在Vue.js应用中轻松地实现重复使用的功能，提高开发效率并减少重复工作。通用表单组件是一个很好的例子，它可以根据不同的需求进行配置，使其适用于多种情况。希望本文对你理解如何创建和使用Vue.js组件有所帮助！
     

  • 相关阅读:
    element ui el-select修改样式
    ruoyi-vue-pro 项目安装使用过程中的问题解决
    计算机毕业设计 基于SpringBoot的健身房管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解目录
    QCustomPlot的下载和使用
    自适应MSER波束形成辅助接收机的MATLAB仿真
    高新技术企业申报时企业提交材料前这些细节
    设计模式-2.创建者模式（单例模式/工厂模式/原型模式/建造者模式）
    旋转的正方体-第15届蓝桥杯第一次STEMA测评Scratch真题精选
    ​iOS安全加固方法及实现
    聚焦采购全方位风险管理，全面提升工程企业采购效率与效益
  • 原文地址：https://blog.csdn.net/qq_63358859/article/details/133157002