审核结果选择与说明：如何设置审核结果并显示相关信息

审核结果选择及相关信息显示

本示例演示如何在网页表单中使用 el-select 组件实现审核结果的选择，并通过 v-if 指令控制根据不同的审核结果显示相应的说明或不通过原因输入框。

代码示例:

<el-form-item label='审核结果' prop='verifyResult'>
  <div class='w-md'>
    <el-select v-model='formData.verifyResult' clearable @change='willshowwhat'>
      <el-option :key='1' label='通过' :value='1' />
      <el-option :key='0' label='不通过' :value='0' />
    </el-select>
  </div>
</el-form-item>

<!-- 如果通过就显示说明、如果不通过就显示不通过的原因一个文本框 -->
<el-form-item  label='说明：'  v-if='willshow'>
  <div class='w-md' style='width: 450px'>
    <span> ①售后类型为仅退款时，如审核通过，资金将原路返还，如已发货，请确认用户是否进行了拒收。②售后类型为退货退款时，如审核通过，需要等待用户退货 </span>
  </div>
 </el-form-item>

<el-form-item label='审核不通过原因' prop='verifyFailedCause' v-if='!willshow'>
  <div class='w-md' style='width: 450px'>
    <el-input v-model='formData.verifyFailedCause' placeholder='请输入审核不通过原因(必填)' />
  </div>
</el-form-item>
</el-form>

代码分析:

• el-select 组件用于选择审核结果，v-model 指令绑定到 formData.verifyResult 属性，用于双向数据绑定。
• @change 事件监听器绑定到 willshowwhat 方法，该方法应该根据 formData.verifyResult 的值更新 willshow 变量。
• v-if 指令用于控制 el-form-item 元素的显示与隐藏。当 willshow 为 true 时，显示 label='说明：' 的 el-form-item 元素，否则显示 label='审核不通过原因' 的 el-form-item 元素。

问题排查:

如果 label='说明：' 的选项没有显示，可能是因为 willshow 变量的值没有正确设置。请确保 willshowwhat 方法正确地根据 formData.verifyResult 的值更新了 willshow 变量。

总结:

本示例展示了如何使用 el-select 和 v-if 指令实现审核结果的选择和根据结果显示相关信息的功能。通过合理地使用 v-if 指令，可以根据需要动态地显示或隐藏页面元素，提高用户体验。