Element UI 表格渲染条件控制:'是'与'否'选项的显示

根据给出的代码,可以推断出表格只会在'是否关联账套'选择'是'的情况下进行渲染。这是因为在代码中使用了条件渲染指令 v-if 来判断'是否关联账套'的值是否为'1',只有在值为'1'时,才会渲染'账套名称'的表单项。如果'是否关联账套'的值为其他值或为空,则不会渲染'账套名称'的表单项。

代码示例:

<el-form-item label='是否关联账套:'>
  <el-radio-group v-model='form.accountRelStatus'>
    <el-radio
      v-for='dict in accountRelStatusOptions'
      :key='dict.dictValue'
      :label='dict.dictValue'
    >
      {{ dict.dictLabel }}
    </el-radio>
  </el-radio-group>
</el-form-item>

<el-form-item
  v-if='form.accountRelStatus == '1''
  label='账套名称:'
  prop='auditedAccountsId'
>
  <el-select
    v-model='form.auditedAccountsId'
    filterable
    placeholder='请选择账套'
    @change='change($event)'
    :loading='loading'
    style='width: 280px'
  >
    <el-option
      v-for='item in options'
      :key='item.accountsId'
      :label='item.accountsName'
      :value='item.accountsId'
    >
    </el-option>
  </el-select>
</el-form-item>

解释:

  • v-if='form.accountRelStatus == '1'': 该指令判断 form.accountRelStatus 的值是否为 '1',只有当值为 '1' 时,才会渲染 el-form-item 内的 '账套名称' 表单项。
  • v-model='form.accountRelStatus': 该指令将 el-radio-group 的选中值绑定到 form.accountRelStatus 属性,用于控制 '是' 或 '否' 选项的选择。

总结:

通过使用 v-if 指令可以实现表格中不同选项的条件渲染,根据用户选择 '是' 或 '否' 来展示不同的内容,提高用户体验和表格的灵活性和可定制性。

Element UI 表格渲染条件控制:'是'与'否'选项的显示

原文地址: https://www.cveoy.top/t/topic/pkkm 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录