vue-antd对表单的简单封装

需求原因

1. 在需求中大量出现表单，每次重写都有些费时，而且dom会很乱
2. 功能基本类似，接受数据回显、发送数据

封装（仅做了常规input兼容）

<template>
  <div>
    <a-modal
      :title="formConfig.name"
      :visible="visible"
      @cancel="visible = false"
      @ok="submit()"
      width="600px"
      :mask-closable="false"
      :keyboard="false"
    >
      <a-form :form="form">
        <a-form-item
          v-bind="layout"
          v-for="(item,index) in formConfig.item"
          :key="index"
          :label="item.nameCn"
        >
          <a-input
            v-decorator="[item.name, {
              rules: [{required: true, message: `请输入${item.nameCn}`}]
            }]"
            :disabled="item.disabled"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: {
    formConfig: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      layout: { labelCol: { span: 6 }, wrapperCol: { span: 16 } }
    };
  },
  methods: {
    handleOpenForm(obj = []) {
      this.form.resetFields();
      this.visible = true;
      setTimeout(() => {
        this.form.setFieldsValue(obj);
      }, 100);
    },
    submit() {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        this.$emit('submit', values);
      });
    }
  }
};
</script>

使用示例

<!-- 运维配置表单 -->
<easy-model-form
  :form-config="peonForm"
  ref="peonForm"
  @submit="submit"
/>

// 可以调整这里的属性来进行配置
const PEON_FORM = [
  {
    name: 'id',
    nameCn: 'id',
    disabled: true
  }, {
    name: 'tenant_id',
    nameCn: '租户id',
    disabled: true
  }, {
    name: 'peon_url',
    nameCn: 'peon_url',
    disabled: false
  }
];
data() {
  return {
    peonForm: {
        name: '运维配置表单',
        item: PEON_FORM
    }
  }
}

// 打开表单
this.$refs.peonForm.handleOpenForm(res.data);