1.form表单绑定的是一个对象,表单里的一个输入项是对象的一个属性之一,修改输入项,表单没刷新的问题,
<el-form :model="formData" :rules="rules" ref="editForm" class="demo-ruleForm"><el-form-item label="执行时段" prop="executeTime" required ><div v-for="(executeTimeItem, index) in formData.executeTimeList" :key="index">指定时刻{{ index + 1 }} <el-time-picker v-model="formData.executeTimeList[index]" placeholder="选择时"@change="(val) => onExecuteTimeRangeChange(val, index)":picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"></el-time-picker> <img class="voice-info-icon-img" :src="require(`@/assets/images/home/material/icon_add.svg`)" @click="addExecuteTime"v-if="formData.executeTimeList.length == (index + 1)" /> <img class="voice-info-icon-img":src="require(`@/assets/images/home/material/icon_delete.svg`)"@click="deleteExecuteTime(index)" v-if="formData.executeTimeList.length > 1" /></div></el-form-item>
</el-form>
这时,怎么修改都没用,
可有用下面方法去修改:
// 执行时段变化时修改formDataonExecuteTimeRangeChange(value, index) {console.info('onExecuteTimeRangeChange value----------', value, index)let temp = this.formData.executeTimeList;temp[index] = value;this.$set(this.formData, 'executeTimeList', temp);},
2.elementUI 的table 动态显示字段,使用v-if绑定在<el-table-column>标签上,显示效果错乱
解决办法:只需要在<el-table-column>标签上加个key属性即可
<el-table-column type="selection" width="55" v-if="manageState" key="selection">
</el-table-column>