| form表单的三种封装方法（Vue+ElementUI） | 您所在的位置：网站首页 › elementui封装带有两个默认参数 › form表单的三种封装方法（Vue+ElementUI） |
|
form表单的三种封装方法（Vue+ElementUI）
1.首先是最普通，也是大家最先想到的方法，直接封装：2.实现表单动态渲染、可视化配置的方法，动态表单又可以分为两种方法：(注意：注意 v-model 的绑定问题， 组件内不能直接修改props 。)3. **动态生成表单**
1.首先是最普通，也是大家最先想到的方法，直接封装：
{{item.name}}
export default {
components: {},
props: {
formConfig: {
type: Object,
required: true
},
value: {
type: Object,
required: true
},
rules: {
type: Object
}
},
computed: {},
methods: {
setDefaultValue() {
const formData = { ...this.value };
// 设置默认值
this.formConfig.formItemList.forEach(({ key, value }) => {
if (formData[key] === undefined || formData[key] === null) {
formData[key] = value;
}
});
this.$emit("input", formData);
}
},
mounted() {
this.setDefaultValue();
}
};
使用Vue的slot插槽来动态渲染各个表单项。通过传递不同的参数来确定表单项的类型、值和验证规则等。基本能够处理解决大多数的表单问题，并且与slot的完美组合，已经可以达到我们的需求要求。 这种方法的优点是灵活性较高，但需要手动编写大量模板代码，也容易出现一些兼容性问题。 2.实现表单动态渲染、可视化配置的方法，动态表单又可以分为两种方法：(注意：注意 v-model 的绑定问题， 组件内不能直接修改props 。) 首先，需要配置 el-form ： export default { props: { formConfig: { type: Object, required: true }, value: { type: Object, required: true } }, methods: { setDefaultValue() { const formData = { ...this.value }; // 设置默认值 this.formConfig.formItemList.forEach(({ key, value }) => { if (formData[key] === undefined || formData[key] === null) { formData[key] = value } }); this.$emit('input', formData) } }, mounted() { this.setDefaultValue() }, } 开始渲染 form-item ： 第一种，利用 vue 内置的 component 组件，写起来可能像这样： 第二种，使用 v-if 逐个判断： 未知控件类型简单介绍 import formMixins from '~/components/Form/iForm/form-model' export default { name: "SelectList", props: ['name', 'label', 'value', 'options'], mixins: [formMixins], data() { return { currentValue: this.value } } }由于每个表单组件都是监听父元素的value值变化，数据变化时都是触发onInputEvent并执行this.$emit(‘input’),所以我们可以把这部分内容抽取出来放在mixins里面。 export default { props: ['name', 'value'], data () { return { currentValue: this.value }; }, methods: { onInputEvent(value) { this.$emit('input', this.name, value); }, reset() { this.currentValue = ""; } }, watch: { value (val) { this.currentValue = val; } } }; 3. 动态生成表单这里主要是根据配置的数据，循环生成表单组件。默认提供提交和重置按钮，如果不需要可以通过slot传递其他操作按钮。这里的要点主要有： 监听表单组件的数据变化： 每个表单组件都有一个name标识它的业务含义，绑定的数据也是formData[field.name]，@input事件传递updateForm，在updateForm里面更新this.formData[name]，保证了this.formData里面的数据是和表单组件选择/填写的内容一致。 重置时改变表单组件的数据： 因为组件内部会监听父元素的value，所以这里只要清空this.formData的值，组件内部的数据也会跟着清空。 {{onSubmitText}} {{onResetText}} |
| CopyRight 2018-2019 实验室设备网 版权所有 |