element-ui踩坑集合

冰派甜心

于 2020-03-07 23:57:30 发布

阅读量424

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_37906822/article/details/104724411

版权

这篇博客汇总了在使用Element-UI组件库时遇到的一些问题及其解决办法，包括input框双向绑定问题、动态列错乱、date-picker报错、时间范围限制问题以及表单验证和重置的问题。通过指定data中的默认值、添加key值、转换日期格式、正确设置ref绑定等方法，可以有效地解决这些问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、input框无法输入的问题
在input中双向绑定的变量，需要在data中设置默认值，具体原因可以了解双向绑定的原理

2、动态列错乱
给每个列加key值

<el-table-column
    v-if="handleShowList('user')"
    key="user"
    sortable
    prop="user"
    label="用户"
>

3、 el-date-picker报错”TypeError: value.getTime is not a function”

用new Date(你的时间）处理一下

4、el-date-picker日期组件（具体到天）做开始时间小于结束时间的限制时，时间段误差8小时

感觉还是组件默认的时分秒问题，没多去研究，在日期加上23小时59分59秒即可，时间单位为毫秒

startTime: {
    disabledDate: time => {
        if (this.searchForm.endTime) {
            // 默认开始时间为00:00，所以要加上23:59的毫秒数
            return time.getTime() + 24 * 60 * 60 * 1000 - 60 * 1000 > new Date(this.searchForm.endTime).getTime()
         }
    }
}

最低0.47元/天解锁文章