当前位置:   article > 正文

ElementUI两个小坑

ElementUI两个小坑

1.form表单绑定的是一个对象,表单里的一个输入项是对象的一个属性之一,修改输入项,表单没刷新的问题,

  1. <el-form :model="formData" :rules="rules" ref="editForm" class="demo-ruleForm">
  2. <el-form-item label="执行时段" prop="executeTime" required >
  3. <div v-for="(executeTimeItem, index) in formData.executeTimeList" :key="index">
  4. 指定时刻{{ index + 1 }}&nbsp;
  5. <el-time-picker v-model="formData.executeTimeList[index]" placeholder="选择时"
  6. @change="(val) => onExecuteTimeRangeChange(val, index)"
  7. :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }">
  8. </el-time-picker>&nbsp;&nbsp;
  9. <img class="voice-info-icon-img"
  10. :src="require(`@/assets/images/home/material/icon_add.svg`)"
  11. @click="addExecuteTime"
  12. v-if="formData.executeTimeList.length == (index + 1)" />&nbsp;
  13. <img class="voice-info-icon-img"
  14. :src="require(`@/assets/images/home/material/icon_delete.svg`)"
  15. @click="deleteExecuteTime(index)" v-if="formData.executeTimeList.length > 1" />
  16. </div>
  17. </el-form-item>
  18. </el-form>

这时,怎么修改都没用,

可有用下面方法去修改:

  1. // 执行时段变化时修改formData
  2. onExecuteTimeRangeChange(value, index) {
  3. console.info('onExecuteTimeRangeChange value----------', value, index)
  4. let temp = this.formData.executeTimeList;
  5. temp[index] = value;
  6. this.$set(this.formData, 'executeTimeList', temp);
  7. },

2.elementUI 的table 动态显示字段,使用v-if绑定在<el-table-column>标签上,显示效果错乱

解决办法:只需要在<el-table-column>标签上加个key属性即可

  1. <el-table-column type="selection" width="55" v-if="manageState" key="selection">
  2. </el-table-column>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/244740
推荐阅读
相关标签
  

闽ICP备14008679号