el-form ref="addCardForm" :model="addCardForm" :rules="addCardFormRules" label-position="right" label-width="150px" class="memberForm" > <el-form-item label="会员卡类型"> <el-radio-group v-model="addCardForm.type" @change="cardTypeChange"> <el-radio :label="1">次卡</el-radio> <el-radio :label="2">储值卡</el-radio> </el-radio-group> </el-form-item> <template v-if="addCardForm.type === 1"> <el-form-item label="会员卡" prop="supplement_id"> <el-select v-model="addCardForm.supplement_id" placeholder="请选择会员卡" @change="cardChange" clearable filterable > <el-option v-for="item in cardList" :key="item.shop_card_id" :label="item.shop_card_name" :value="item.shop_card_id" ></el-option> </el-select> </el-form-item> </template>
<template v-else> <el-form-item label="会员卡" prop="supplement_id" key="1"> <el-select v-model="addCardForm.supplement_id" placeholder="请选择会员卡" @change="balanceChange" clearable filterable > <el-option v-for="item in balanceList" :key="item.sbc_id" :label="item.balance_card_name" :value="item.sbc_id" ></el-option> </el-select> </el-form-item> <el-form-item label="剩余本金" prop="current_balance" key="2"> <el-input v-model="addCardForm.current_balance" placeholder="¥0.00"></el-input> </el-form-item> <el-form-item label="剩余赠送金额" prop="current_dis_balance" key="3"> <el-input v-model="addCardForm.current_dis_balance" placeholder="¥0.00"></el-input> </el-form-item> </template>
<el-form>
实际上出现这个问题是因为vue的diff算法，在diff算法中会尽可能的复用组件，所以此处看上根据formData.xxx进行切换，但实际上diff算法会复用组件，并没有重新渲染，所以需要配合key属性。
<el-form-item label="剩余本金" prop="current_balance" key="2">
