你绝对想不到的最优解-element-ui的原生坑

402 阅读2分钟

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

今天正好团队中的一个成员碰到了一个比较恶心的问题,自己处理半天无果,大家不难发现,我们用的很多的组件他的BUG都很多,最多的我碰到的是BootStrap,目前已经弃用,本次采用的是element-ui,还是碰到了问题,最后他徒劳无果,还是让我来解决吧!

问题解析

问题是这样的:

  • el-time-select修改时间值,但是视图不更新,值没问题,不影响数据传更新,恶心在于用户体验极差,会让用户觉得这个时间一直修改不了,会把电脑砸了,那最后怎么解决的呢?是这样做的
              <el-time-select
                v-model="form.TimeS"
                :picker-options="{
                    start: '00:00',
                    step: '00:15',
                    end: '24:00'
                  }"
                placeholder="开始时间"
              ></el-time-select>

他找了一些网上案例测试,结果差强人意,踩了这几个坑,大家就不要尝试了,我给大家列举出来:

  • 有人提到的用$set()去解决,不知道是哪年的文章,尝试之后根本就没用,而且你需要绑定@blur的方法保证选择之后触发然后重新set,压根不好使!
  • 采用重新赋值的方法,如果你尝试之后发现值根本不改变,哪怕你在组件上绑定的了ref
              <el-time-select
                v-model="form.TimeS"
                ref="TimeChange"
                :picker-options="{
                    start: '00:00',
                    step: '00:15',
                    end: '24:00'
                  }"
                placeholder="开始时间"
              ></el-time-select>

你会惊奇的发现 this.$refs['TimeChange'].value 根本找不到值 value是“”。

  • 你更诧异@chang方法触发不了,冰冻了!!!!!

image.png

解决方案

出现问题的原因?

因为el-time-select组件内绑定的V-model初始值定义在form表单内,所以无法实现视图更新,同时我们需要考虑表单提交时,这是一个必填项。

最优解

1、v-model的值直接定义在data.return的最外层

2、此时你会发现你的change方法可以用了(大家一定有疑问,为什么这么执着非要change事件,因为只有change可以发回当前选择的值,你不需要多余的代码)
template:
              <el-time-select
                @change="changeTimeS"	
                v-model="startTime"
                ref="TimeChange"
                :picker-options="{
                    start: '00:00',
                    step: '00:15',
                    end: '24:00'
                  }"
                placeholder="开始时间"
              ></el-time-select> 
              
初始化:
data(){
    return{
    startTime: '' =》一定放在最外层
    }
}
changeTimeS(data){
      console.log(data)
      this.form.courseTimeS = data =》因为做了表单验证,在值改变的第一时间进行复制,变向通过了表单验证,无需单独写
      console.log(this.$refs['TimeChange'].value) => 与data值相同
    },

结语

组件的这种bug大家看的很简单,但是对于经验不足的会花费很多的时间解决问题,大家可能会说,最后就这么简单,但你要想想,在这个过程中不断的尝试,你看别人的文章,尝试。这都是你的时间成本,本次的方法不光可以更新视图,大家也无需再单独坐表单验证,那个会更花费时间,用表单自带的验证那你可能凉了!就这样简单的方法希望对大家有用,不要再尝试那些无用的帖子了。最最最最精华就在这里