vue+element+ui+表单动态渲染+可视化配置的方法+事件怎么添加？

Posted 2023-03-22

参考技术A <template>
<el-form :model="formData" :rules="formRules" ref="form">
<el-form-item v-for="(item, index) in formConfig" :label="item.label" :key="index">
<template v-if="item.type === 'input'">
<el-input v-model="formData[item.field]" :placeholder="item.placeholder" @input="handleInput(item.field)" />
</template>
<template v-else-if="item.type === 'select'">
<el-select v-model="formData[item.field]" placeholder="请选择" @change="handleSelect(item.field)">
<el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value" />
</el-select>
</template>
<!-- 其他表单元素类型 -->
</el-form-item>
</el-form>
</template>

<script>
export default
data()
return
formConfig: [], // 表单数据结构
formData: , // 表单数据
formRules: // 表单验证规则

,
methods:
handleInput(field)
// 处理输入框 input 事件
,
handleSelect(field)
// 处理下拉框 change 事件

// 其他事件处理函数


</script>

element-ui 表单编辑之后再新增表单数据无法清空问题（已解决）

参考技术A 问题场景：
vue element ui在做编辑和添加时候使用同一个组件页面，先点击编辑然后在点击新增，此时表单数据不清空，使用this.$refs[dataForm].resetFields()也无效。

问题原因：
点击编辑 再点击添加，这时候数据已经赋值了，this.$refs['dataForm'].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据，表单渲染时就会将这个修改对象作为初始值，所以出现无效了。

解决方法：
（1）用 nextTick(() =>
this.$refs['dataForm'].resetFields();
);

（2）如果（1）不行的话就直接在页面初始的时候将表单数据重置：
this. refs['dataForm'].clearValidate() //移除表单项的校验结果
);
for(let key in this.dataForm)
this.dataForm[key]=""


以上over~