form中表单切换，导致 relus 中的事件无法触发，原因：页面切换不要一直切换DOM，会导致问题，需要都显示出来-Toy模板网

这篇具有很好参考价值的文章主要介绍了form中表单切换，导致 relus 中的事件无法触发，原因：页面切换不要一直切换DOM，会导致问题，需要都显示出来。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

修改前，因为重复渲染DOM导致绑定rules失效

form中表单切换，导致 relus 中的事件无法触发，原因：页面切换不要一直切换DOM，会导致问题，需要都显示出来,javascript,前端,elementui

修改前代码使用 computed 计算出渲染的DOM，影响rules事件
 <el-form
        ref="form"
        inline
        :model="billDetailCopy"
        :rules="rules"
        size="small"
        label-position="right"
        label-width="110px"
        class="addInvoice-content-input">
        <el-row>
          <el-form-item v-for="(item,index) in filter(ordinaryList)" :key="index" :prop="item.key" :label="item.label" >
		 <el-form-item/>
        <el-form/>

修改后，将切换的DOM使用v-show都渲染在页面，不会让rules错乱。

form中表单切换，导致 relus 中的事件无法触发，原因：页面切换不要一直切换DOM，会导致问题，需要都显示出来,javascript,前端,elementui

修改后各渲染各的
<el-form
        v-show="billDetailCopy.type === '增值税普通发票'"
        ref="form1"
        inline
        :model="billDetailCopy"
        :rules="rules"
        size="small"
        label-position="right"
        label-width="110px"
        class="addInvoice-content-input">
        <el-row>
          <el-form-item v-for="(item,index) in ordinaryList" :key="index" :prop="item.key" :label="item.label" >
          <el-form-item/>
        <el-form/>