initValue: '223',
};
},
};
</script>
2. FormItem 的设计
<el-form-item label="用户名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>在 ElementUI 的
formItem 中，我们可以看到：需要
label 来显示名称；需要
prop 来校验当前项；需要给
input 或
button 预留插槽；根据上面的需求，我们可以创建出自己的
formItem ，新建一个 FormItem.vue 文件 。
<template>
<div>
<!-- 解释一 -->
<label v-if="label">{{ label }}</label>
<div>
<!-- 解释二 -->
<slot></slot>
<!-- 解释三 -->
<p v-if="validateState === 'error'" class="error">{{ validateMessage }}</p>
</div>
</div>
</template><script>
export default {
name: "EFormItem",
props: {
label: { type: String, default: '' },
prop: { type: String, default: '' }
},
data() {
return {
validateState: '',
validateMessage: ''
}
},
}
</script>
<style scoped>
.error {
color: red;
}
</style>
和上面一样，我们接着对上面的代码进行一些解释：
**解释一：**根据 ElementUI 中的用法，我们知道
label 是父组件传来，且当传入时我们展示，不传入时不展示。解释二：
slot 是一个预留的槽位，我们可以在其中放入
input 或其他组件、元素。解释三：
p 标签是用来展示错误信息的，如果验证状态为
error 时，就显示。此时，我们的
FormItem 组件也可以使用了。同样，我们在 App.vue 中引入该组件。
<template>
<div id="app"> <e-form-item label="用户名" prop="name">
<e-input v-model="ruleForm.name"></e-input>
</e-form-item>
<e-form-item label="密码" prop="pwd">
