vue+element form的封装【更新】

基于之前表单封装的更改

直接上代码了

<template>
  <el-form
    :ref="refName"
    :class="[className, inline ? 'inline-form' : '']"
    :model="data"
    :inline="inline"
    :rules="rules"
    :label-position="labelPosition"
    :label-width="labelWidth"
  >
    <template v-for="(item, index) in configList">
      <slot v-if="item.type === 'slot'" :name="item.slot" />
      <el-form-item
        v-else
        :key="index"
        :prop="item.value"
        :label="item.label"
        :class="item.className"
      >
        <!-- 普通输入框 -->
        <el-input
          v-if="item.type === 'input' || item.type === 'password'"
          v-model="data[item.value]"
          :type="item.type"
          :show-password="item.showPassword"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :placeholder="item.placeholder"
          @change="handleChange(item.value, data[item.value])"
          @blur="handleChange(item.value, data[item.value])"
        />
        <!-- 文本输入框 -->
        <el-input
          v-if="item.type === 'textarea'"
          v-model.trim="data[item.value]"
          :type="item.type"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          :autosize="item.autosize || { minRows: 2, maxRows: 10 }"
        />

        <!-- 单选框组 -->
        <el-radio-group
          v-if="item.type === 'radioGroup'"
          v-model="data[item.value]"
          @change="handleChange(item.value, data[item.value])"
          @blur="handleChange(item.value, data[item.value])"
        >
          <el-radio
            v-for="(item, index) in item.radioList"
            :key="index"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
        <!-- 计数器 -->
        <el-input-number
          v-if="item.type === 'inputNumber'"
          v-model="data[item.value]"
          size="small"
          :min="item.min"
          :max="item.max"
          @change="handleChange(item.value, data[item.value])"
          @blur="handleChange(item.value, data[item.value])"
        />
        <!-- 选择框 -->
        <el-select
          v-if="item.type === 'select'"
          v-model="data[item.value]"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :filterable="item.filterable"
          :placeholder="item.placeholder"
          @change="handleChange(item.value, data[item.value])"
          @blur="handleChange(item.value, data[item.value])"
        >
          <el-option
            v-for="(childItem, childIndex) in listInfo[item.list]"
            :key="childIndex"
            :label="childItem[item.listProps.label]"
            :value="childItem[item.listProps.value]"
          />
        </el-select>
        <!-- 日期选择框 -->
        <el-date-picker
          v-if="item.type === 'date'"
          v-model="data[item.value]"
          :type="item.dateType"
          :picker-options="item.TimePickerOptions"
          :clearable="item.clearable"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
          @change="handleChange(item.value, data[item.value])"
          @blur="handleChange(item.value, data[item.value])"
        />
      </el-form-item>
    </template>
  </el-form>
</template>

<script>

export default {
  name: "iForm",
  props: {
    // 自定义类名
    className: {
      type: String
    },
    // 表单数据
    data: {
      type: Object
    },
    // 相关字段
    fieldList: {
      type: Array
    },
    // 验证规则
    rules: {
      type: Object
    },
    // 相关的select列表
    listInfo: {
      type: Object
    },
    //是否为行内表单
    inline: {
      type: Boolean,
      default: false
    },
    // label宽度
    labelWidth: {
      type: String,
      default: "160px"
    },
    labelPosition: {
      type: String,
      default: "left"
    },
    //form实例对象
    refObj: {
      type: Object
    },
    //form的ref名称
    refName: {
      type: String,
      default: "form"
    }
  },
  components: {
    
  },
  data() {
    return {};
  },
  computed: {
    configList() {
      return this.fieldList.filter(
        item =>
          !item.hasOwnProperty("show") ||
          (item.hasOwnProperty("show") && item.show)
      );
    }
  },
  watch: {
    refName(val) {
      this.$emit("update:refObj", this.$refs[this.refName]);
    },
    data: {
      handler: function(val) {
        // 将form实例返回到父级
        this.$emit("update:refObj", this.$refs[this.refName]);
        //更新form数据
        this.$emit("update:data", val);
      },
      deep: true // 深度监听
    }
  },
  mounted() {
    // 将form实例返回到父级
    this.$emit("update:refObj", this.$refs[this.refName]);
    this.setDefaultValue();
  },
  methods: {
    setDefaultValue() {
      if (Object.keys(this.data).length) {
        const formData = { ...this.data };
        // 设置默认值
        this.fieldList.forEach(({ key, value }) => {
          if (formData[key] === undefined || formData[key] === null) {
            formData[key] = value;
          }
        });
      }
    },
    
    // 绑定的相关事件
    handleChange(name, value) {
      //联动校验表单项
      if (this.$refs[this.refName]) {
        this.$refs[this.refName].validateField(name, error => {
          return error;
        });
      }
      this.$emit("handleChange", name, value);
    }
  }
};
</script>

<style lang="scss" scoped>
.inline-form {
  .el-form-item {
    width: 48%;
  }
}
</style>

引入并注册组件

import iForm from "@/components/iForm";

components: {
    iForm
  },

在页面中使用是这样的

<div>   
     <i-form
        class-name="inline-form"
        :ref-obj.sync="formInfo.ref"
        :inline="true"
        :data="formInfo.data"
        :list-info="list"
        :field-list="formInfo.fieldList"
        :rules="formInfo.rules"
        :label-width="formInfo.labelWidth"
      />
     <el-button type="primary" @click="submit">提交</el-button>
</div>

data() {
  return{
    list: {
        orgList: []
      },
      formInfo: {
        ref: null,
        labelWidth: "120px",
        labelPosition: "left",
        data: {
           dn: "",
           sn: "",
           givenName: "",
           initials: "",
        },
        fieldList: [
            {
              type: "select",
              clearable: true,
              value: "dn",
              label: "组织:",
              placeholder: "组织",
              list:'orgList',
              listProps:{
                 value: "nameInNamespace",
                 label: "orgName"
              }
            },
            {
              type: "input",
              clearable: true,
              value: "sn",
              label: "姓(L):",
              placeholder: "姓"
            },
            {
              type: "input",
              clearable: true,
              value: "givenName",
              label: "名(F):",
              placeholder: "名"
            },
            {
              type: "input",
              clearable: true,
              value: "initials",
              label: "英文缩写(I):",
              placeholder: "英文缩写"
            },
            {
              type: "input",
              clearable: true,
              value: "displayName",
              label: "显示名称(S):",
              placeholder: "显示名称"
            },
            {
              type: "input",
              clearable: true,
              value: "description",
              label: "描述(D):",
              placeholder: "描述"
            },
            {
              type: "input",
              clearable: true,
              value: "physicalDeliveryOfficeName",
              label: "办公室(L):",
              placeholder: "办公室"
            },
            {
              type: "input",
              clearable: true,
              value: "telephoneNumber",
              label: "电话(T):",
              placeholder: "电话"
            },
            {
              type: "input",
              clearable: true,
              value: "mail",
              label: "邮箱(M):",
              placeholder: "邮箱"
            },
            {
              type: "input",
              clearable: true,
              value: "wWWHomePage",
              label: "网页(W):",
              placeholder: "网页"
            }
          ],
        rules: {
          sn: [{ required: true, message: "请输入姓", trigger: "blur,change" }],
          givenName: [
              { required: true, message: "请输入名", trigger: "blur,change" }
            ],
          initials: [
              {
                required: true,
                validator: checkInitial,
                trigger: "blur,change"
              }
            ],
          displayName: [
              {
                required: true,
                message: "请输入显示名称",
                trigger: "blur,change"
              }
            ]
        }
      }
   }
},

methods: {
  submit() {
      this.formInfo.ref.validate(valid => {
        if (valid) {
          
        } else {
          console.log("error");
        }
      });
    }
}