<template #default="{ row }"> <vxe-radio-group v-model="row.reportResult" :disabled="!editConfig.editable" @change="handleRadioChange"> <vxe-button v-if="canSubmit" :content="row.taskSubUserName || '下发科室'" :disabled="!editConfig.editable" class ="taskSubUserBtn" :status="row.taskSubUserName ? 'success':'info'" @click="forwardSubUser(row)"

根据提供的代码,我理解的情况是在使用vxe-radio-group组件时,当row.reportResult的值改变时,才会显示该组件的内容。这可能是由于vxe-radio-group组件的特性导致的,它需要一个值来确定哪个选项被选中并显示相应的内容。

如果想要一开始就显示该组件,可以在data中定义一个默认值来初始化row.reportResult,例如:

data() {
  return {
    row: {
      reportResult: '2' // 默认选中不合格
    },
    // 其他数据...
  }
}

这样在渲染页面时,vxe-radio-group组件会根据初始值来显示相应的选项。

另外,如果需要在点击vxe-radio-button选项时即时更新row.reportResult的值,可以将vxe-radio-group的change事件绑定到一个方法中,例如:

<template #default="{ row }">
  <vxe-radio-group v-model="row.reportResult" :disabled="!editConfig.editable" @change="handleRadioChange">
    <vxe-radio-button v-if="row.canAbsences === 1" :label="'1'" content="合理缺项"></vxe-radio-button>
    <vxe-radio-button :label="'2'" content="不合格"></vxe-radio-button>
    <vxe-radio-button :label="'3'" content="合格"></vxe-radio-button>
  </vxe-radio-group>
  <!-- 其他内容... -->
</template>

<script>
export default {
  methods: {
    handleRadioChange(value) {
      // value为选中的选项的值,可以将其赋值给row.reportResult
      this.row.reportResult = value
    }
  }
}
</script>

这样在选中某个选项时,可以即时更新row.reportResult的值。

vxe-radio-group 组件显示问题:数据绑定及初始值设置

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

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