今天遇到一点问题,在审批弹窗里给时间组件赋默认值,但是视图不更新
其中父组件调用弹窗组件如下:
<!--审批弹窗 -->
<AuthourityApproval
:approval-data="approvalData"
v-if='dialogShow'
:dialogShow="dialogShow"
@submit="submiApprovalt"
/>
子组件代码如下:
<template>
<el-dialog title="审批" :visible.sync="dialogShow" width="45%" :close-on-click-modal="false" top="5vh">
<el-form ref="dialogFrom" :model="formData" label-width="130px">
<el-form-item label="申请理由:">
<span>{{ this.approvalData.applyReason }}</span>
</el-form-item>
<el-form-item label="开通权限:" prop="approvaStatus" :rules="{
required: true,
message: '请选择开通权限',
trigger: 'change'
}">
<el-select v-model="formData.approvaStatus" placeholder="请选择开通权限" clearable>
<el-option v-for="item in OptionOfApproveStatus" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="开通权限时间:" prop="times" :rules="{
required: true,
message: '请选择开通权限时间',
trigger: 'change'
}">
<el-date-picker
v-model="formData.times"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="yyyy-MM-dd"
/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="submit(false)">取 消</el-button>
<el-button type="primary" @click="submit(true)">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'EmpowerDialog',
props: {
approvalData: Object,
dialogShow: Boolean
},
data() {
return {
formData: {
times: [],
startDate: '', // 申请权限开始时间
endDate: '', // 申请权限计算后时间
approvaStatus: ''
},
OptionOfApproveStatus: [
{ label: '通过', value: 1 },
{ label: '不通过', value: 2 }
]
}
},
// 当父组件有v-if时,子组件的dialog的显示和隐藏状态失效导致功能无法实现
// watch: {
// async dialogShow(newValue) {
// console.log(newValue)
// if(newValue) {
// console.log('watch');
// await this.initDate()
// await this.initForm()
// await this.getDate()
// }
// if (!newValue) return
// }
// },
created() {
this.getDate()
},
mounted() {
},
methods: {
async initForm() {
await this.$nextTick()
this.$refs.dialogFrom.resetFields()
},
// 获取默认时间
getDate() {
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth(); //得到月份
var date = now.getDate(); //得到日期
month = month + 1;
month = month.toString().padStart(2, "0");
date = date.toString().padStart(2, "0");
// this.approvalData.applyTime 申请权限天数
this.addDate(`${year}-${month}-${date}`,this.approvalData.applyTime-0)
this.formData.startDate = `${year}-${month}-${date}` // 开始时间
console.log(this.formData.startDate,this.formData.endDate)
const arr = []
arr.push(this.formData.startDate,this.formData.endDate)
this.$set(this.formData, 'times', arr)
},
// date为相加前的时间, days 为 需要相加的天数
addDate(date, days) {
var date = new Date(date);
date.setDate(date.getDate() + days);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var mm = "'" + month + "'";
var dd = "'" + day + "'";
if(mm.length === 3) {
month = "0" + month;
}
if(dd.length === 3) {
day = "0" + day;
}
this.formData.endDate = year + "-" + month + "-" + day // 结束时间
},
// 清除数据
initDate () {
this.$set(this.formData, 'times', '')
this.formData = {
times: [],
startDate: '',
endDate: '',
approvaStatus: ''
}
},
submit(isUpdate) {
if (isUpdate) {
this.$refs.dialogFrom.validate((valid) => {
if (valid) {
const arr = []
arr.push({
id: this.approvalData.id,
approvaStatus: this.formData.approvaStatus,
startDate:this.formData.times[0],
endDate: this.formData.times[1],
})
this.$api2.specificationDataApprova.batchApproval({
json:JSON.stringify(arr)
}).then(() => {
this.$message.success('审批成功')
this.approvalData.show = false
this.$refs.dialogFrom.resetFields()
this.initDate()
this.$emit('submit', {}, isUpdate)
})
} else {
console.log('error submit!!');
return false;
}
});
} else {
this.initDate()
this.$emit('submit', {}, isUpdate)
}
}
},
};
</script>
当父组件v-if存在时,会导致子组件的显示和隐藏状态失效,导致监听无法正常工作,所以只有写了created生命周期,调用getDate方法才可以正常赋值。
所以可以删除父组件的v-if,同时删除子组件created生命周期,监听就可以正常工作了
其中如果遇到$set层次渲染的问题,还可以替换用法,使用this.$forceUpdate()方法