我的代码:
<el-tab-pane label="小时">
允许的通配符[, - * /]
<el-radio-group v-model="radio_hour">
<el-radio style="display:block;margin:10px 0;" :label="1">
每小时
</el-radio>
<el-radio style="display:block;margin:10px 0;" :label="4">指定</el-radio>
<div>上午:</div>
<el-checkbox-group v-if="hourObj.moring_arr.length>0" v-model="hourObj.appoint_hour_moring" @change="valueChange('appoint_hour_moring')">
<template v-for="(item,index) in hourObj.moring_arr">
<el-checkbox :key="index" :label="index">{{ item }}</el-checkbox>
</template>
</el-checkbox-group>
</el-radio-group>
</el-tab-pane>
结果发现,“允许的通配符[, - * /] ” 并没有显示。后来经过尝试发现,el-tab-pane中只允许一个根div,所以用<div />
包裹后,就能成功显示了。优化后的代码:
<el-tab-pane label="小时">
<div>
允许的通配符[, - * /]
<el-radio-group v-model="radio_hour">
<el-radio style="display:block;margin:10px 0;" :label="1">
每小时
</el-radio>
<el-radio style="display:block;margin:10px 0;" :label="4">指定</el-radio>
<div>上午:</div>
<el-checkbox-group v-if="hourObj.moring_arr.length>0" v-model="hourObj.appoint_hour_moring" @change="valueChange('appoint_hour_moring')">
<template v-for="(item,index) in hourObj.moring_arr">
<el-checkbox :key="index" :label="index">{{ item }}</el-checkbox>
</template>
</el-checkbox-group>
</el-radio-group>
</div>
</el-tab-pane>