elementUI时间组件el-time-picker不能正确赋值的原因

最新推荐文章于 2024-09-25 15:36:02 发布

re：03

最新推荐文章于 2024-09-25 15:36:02 发布

阅读量335

点赞数 2

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/m0_61874512/article/details/140442553

版权

先贴出源代码

<template>
     <el-table highlight-selection-row :data="editform.disinfectDetailList" border style="width: 100%">
 <el-form-item label="" label-width="0" :prop="'disinfectDetailList.' + scope.$index + '.timerange'" :rules="{ required: true, message: '消毒时间不能为空', trigger: 'change' }">
<el-time-picker is-range v-model.trim="scope.row.timerange" style="width: 100%" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="请选择消毒时间"> </el-time-picker>
</el-form-item>
</el-table>
</template>
export default {
  data() {
    return {
    editform: {
        disinfectDetailList: [],
      },
}},
git(){
 disinfectfindById({ unid: row.unid }).then((res) => {
          this.loading = false
          if (res.success) {
          Object.assign(this.editform, res.data)
            if (!this.editform.disinfectDetailList || this.editform.disinfectDetailList.length === 0) {
              this.editform.disinfectDetailList = []
              this.additem()
            } else {
              this.editform.disinfectDetailList = this.editform.disinfectDetailList.map((i) => {
                i.way = i.way ? i.way.split(",").map((i) => +i) : []
                i.timerange = [new Date(2016, 9, 10, i.startHour, i.startMin), new Date(2016, 9, 10, i.endHour, i.endMin)]
                return i
              })
            }
          }
          this.showdialog = true
        })
},

描述一下我的问题，我写了自定义表格做显示，我添加的时候没问题。但是我调用接口重新组装数据格式赋值给自定义表格就出现了在数据格式正常值存在的情况下表格和组件的值不一致，也就是值不会发生变化的情况，但是此时editform.disinfectDetailList数组内的时间值是正确的。但是时间组件内的值和显示的值还是原来的值。

解决的过程也很简单，我先确认了此时的editform.disinfectDetailList数组存在且数组内的字段timerange时间格式正确，但是组件显示的和timerange字段不一致。

再一次踏入了这个坑，原因其实很简单，在写有格式验证的elementUI组件的时候需要在赋值之前就有对应的值，并且格式需要正确。不然就会出现数据格式正常值存在的情况下修改值但是显示的值无变化，但是也报错的情况。所以只要把 Object.assign(this.editform, res.data)这一行移动到后面就行了。哭唧唧，二次入坑记录

正确代码

 disinfectfindById({ unid: row.unid }).then((res) => {
          this.loading = false
          if (res.success) {
            if (!res.data.disinfectDetailList || res.data.disinfectDetailList.length === 0) {
              res.data.disinfectDetailList = []
              this.additem()
            } else {
              res.data.disinfectDetailList = res.data.disinfectDetailList.map((i) => {
                i.way = i.way ? i.way.split(",").map((i) => +i) : []
                i.timerange = [new Date(2016, 9, 10, i.startHour, i.startMin), new Date(2016, 9, 10, i.endHour, i.endMin)]
                return i
              })
              this.$forceUpdate()
            }
          }
          Object.assign(this.editform, res.data)
          this.showdialog = true
        })