el-date-picker默认数据之后修改不渲染的问题

2022-01-24  本文已影响0人  肥羊猪

通常我们在写新增修改时,修改会用到回显数据的问题,但是偶尔有出现change事件/input事件改变了form数据,页面并没有渲染的问题,同时一键删除按钮也不能渲染,万变不离其宗,给组件加个key就好啦。
如下:

<el-date-picker :key="itemKey" :default-time="['00:00:00', '23:59:59']"  
v-model="form.date"  @input="createTimeFn" type="datetimerange" 
 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" 
style="min-width:600px">
 </el-date-picker>
import {cloneDeep} from 'lodash';
props: {
    config: {
      type: Object,
      default: {}
    }
  },
data() {
    return {
      itemKey:null,// 关键参数key
      // 表单参数
      form: {
        startTime: undefined,
        endTime: undefined,
        date: [],
      },
 }
},
created() {
    this.initData()
  },
 methods: {
      // 时间选择
    createTimeFn (val) {
      this.itemKey = Math.random();//给key赋随机值
      if (this.form.date) {
        this.form.startTime = val[0].getTime();
        this.form.endTime = val[1].getTime();
      } else {
        this.form.endTime = null;
        this.form.startTime = null;
      }
    },
// 初始化数据
initData() {
      this.itemKey = Math.random();// 初始化赋值 key
      if (this.config.editFrom) {
        let {startTime,endTime} = this.config.editData;
        this.form = cloneDeep(this.config.editData);
        this.form.date = [new Date(startTime),new Date(endTime)]
      } else {
        this.reset();
      }
    }
}
上一篇下一篇

猜你喜欢

热点阅读