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();
}
}
}