开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

优化字段绑定

一开始我们在内部绑定，控制性不怎么好，我们可以选择外部去绑定

//父组件
 <a-form :item="form_item" :field="form_field"></a-form>

        form_field: {
            name: "",
            gender: ""
        }

//form组件
  props: {
    item: {
      type: Array,
      default: () => [],
    },
    field: {
        type: Object,
        default: () => ({})
    }
   }

我们绑定需要实时响应，一开始通过监听的方式去响应有点繁琐，这下我们可以 `field`绑定到v-model上，`v-model="field[item.prop]"`,这个就是field[item.prop] === field['name']，一个动态语法

  <el-form ref="form" :model="form" label-width="80px">
    <templete v-for="item in form_item"  :key="item.prop">
      <el-form-item
        v-if="item.type === 'input'"
        :label="item.label"
      >
        <el-input v-model="field[item.prop]"></el-input>
      </el-form-item>
      <el-form-item
        v-if="item.type === 'select'"
        :label="item.label"
      >
        <el-select v-model="field[item.prop]"></el-select>
      </el-form-item>
    </templete>
  </el-form>

这样我们就方便许多了，当我们初始化的时候也可以传一些数据

  form_field: {
            name: "初始化",
            gender: ""
        }

了解校验规则

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可，我们只需要知道 :model="ruleForm"，:rules="rules"，prop="name"这三个东西，rules去定义验证规则，model里面对应的字段和prop里面的字段要一致

传统方式绑定校验规则

我们的字段绑定在field，model上也继续使用这个字段，通过组件传值的方式去定义rules

父组件

<a-form :item="form_item" :field="form_field" :rules="form_rules"></a-form>

   form_rules: {
            name: [
                {required: true, message: "必填"}
            ]
        }

form组件 我们在el-form是上面 定义 :rules="rules

    rules: {
        type: Object,
        default: () => ({})
    }

我们定义了一个姓名的必填项，这样就出来了

附完整代码

<template>
    <a-form :item="form_item" :field="form_field" :rules="form_rules"></a-form>
</template>
<script>
export default {
    name: "Home",
  components: {
    "a-form": () => import("@/components/form/index"),
  },
  data() {
    return {
        form_item: [
            {type: 'input', prop: 'name', label: "姓名"},
            {type: 'select', prop: 'gender', label: "性别"}
        ],
        form_field: {
            name: "初始化",
            gender: ""
        },
        form_rules: {
            name: [
                {required: true, message: "必填"}
            ]
        }
    }
  }
}
</script>

<template>
  <el-form :model="field" :rules="rules" ref="form"  label-width="80px">
    <templete v-for="item in form_item" :key="item.prop">
      <el-form-item
        v-if="item.type === 'input'"
        :label="item.label"
        :prop="item.prop"
      >
        <el-input v-model="field[item.prop]"></el-input>
      </el-form-item>
      <el-form-item
        v-if="item.type === 'select'"
        :label="item.label"
        :prop="item.prop"
      >
        <el-select v-model="field[item.prop]"></el-select>
      </el-form-item>
    </templete>
  </el-form>
</template>
<script>
export default {
  name: "Form",
  props: {
    item: {
      type: Array,
      default: () => [],
    },
    field: {
        type: Object,
        default: () => ({})
    },
    rules: {
        type: Object,
        default: () => ({})
    }
  },
  data() {
    return {
      form_item: [],
      form: {
        name: "",
      },
    };
  },
  beforeMount() {
    this.form_item = this.item;
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>