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

通常我们在写新增修改时,修改会用到回显数据的问题,但是偶尔有出现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();
      }
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容