美文网首页
el-date-picker默认数据之后修改不渲染的问题

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

作者: 肥羊猪 | 来源:发表于2022-01-24 15:05 被阅读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();
          }
        }
    }
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/vzubhrtx.html