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>

Element UI 是一个基于 Vue.js 的 UI 组件库,它提供了丰富的组件和样式,方便开发人员构建用户界面。尽管 Element UI 是一个很受欢迎的框架,但也不可避免地会有一些坑需要注意。 1. 版本兼容性问题:在使用 Element UI 时,要确保你的 Vue.js 版本与 Element UI 的版本兼容。不同版本之间可能会存在一些 API 不一致的问题,导致一些功能无法正常使用。 2. 样式冲突:Element UI 提供了一套默认的样式主题,如果你的项目中已经有自定义的样式或者使用了其他的样式库,可能会出现样式冲突的问题。这时可以通过修改 Element UI 的主题样式或者使用 scoped 样式来解决冲突。 3. 组件定制化:Element UI 提供了很多常用的组件,但是当你需要进行一些较为特殊的定制时,可能会遇到一些限制。这时可以通过修改组件源码或者使用插槽等方式来实现定制化需求。 4. 文档不完善:尽管 Element UI 的文档相对较详细,但仍然可能存在一些不完善或者错误的地方。在遇到问题时,你可能需要查阅一些社区的讨论或者尝试不同的方法来解决。 5. 性能问题:由于 Element UI 提供了大量的组件和功能,如果在大规模数据展示或者复杂交互的情况下使用,可能会导致页面性能下降。在使用时要注意优化,避免过多的渲染和不必要的重绘。 这些是一些常见的 Element UI 中的坑,希望对你有所帮助。如果你有具体的问题,可以提供更多细节,我会尽力回答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值