ElementUI两个小坑

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 }}&nbsp;
          <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>&nbsp;&nbsp;
         <img class="voice-info-icon-img"     
            :src="require(`@/assets/images/home/material/icon_add.svg`)" 
            @click="addExecuteTime"
           v-if="formData.executeTimeList.length == (index + 1)" />&nbsp;
        <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>

这时,怎么修改都没用,

可有用下面方法去修改:

// 执行时段变化时修改formData
        onExecuteTimeRangeChange(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>

相关推荐

  1. 爬虫的案例

    2024-03-15 16:50:03       46 阅读
  2. Flink SQL填记3:kafka数据关联查询

    2024-03-15 16:50:03       35 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-15 16:50:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-15 16:50:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-15 16:50:03       87 阅读
  4. Python语言-面向对象

    2024-03-15 16:50:03       96 阅读

热门阅读

  1. Alias许可数量计算

    2024-03-15 16:50:03       46 阅读
  2. React.FC介绍

    2024-03-15 16:50:03       33 阅读
  3. php 微信扫码支付

    2024-03-15 16:50:03       48 阅读
  4. XML常用介绍

    2024-03-15 16:50:03       43 阅读
  5. Python中的增强现实(AR)技术和应用

    2024-03-15 16:50:03       38 阅读
  6. buuctf 部分web题

    2024-03-15 16:50:03       36 阅读
  7. 蓝桥杯2023年-阶乘的和(数学推理,C++)

    2024-03-15 16:50:03       38 阅读
  8. 一文了解什么是函数柯里化

    2024-03-15 16:50:03       42 阅读
  9. CSS 02

    CSS 02

    2024-03-15 16:50:03      30 阅读
  10. html5&css&js代码 008 名画欣赏

    2024-03-15 16:50:03       43 阅读
  11. 充分理解虚拟机中的NAT模式和主机模式

    2024-03-15 16:50:03       35 阅读