el-dialog弹框关闭清空form表单并清空验证
cancelDialog(diaLog, formRef) {
this[diaLog] = false
if (formRef) {
this.$refs[formRef].resetFields()
}
}
页面使用:
<el-dialog
:visible.sync="addSubsidyDialog.dialog"
@close="cancelDialog(addSubsidyDialog.dialog, 'subsidyRef')"
>
<el-form ref="subsidyRef"></el-form>
</el-dialog>
@close传参说明:
需要关闭的弹窗this、关闭后需要清空的form表单
el-date-picker限制结束时间不能小于开始时间
template:
<div>
<el-date-picker
v-model="innerBeginDate"
type="date"
placeholder="开始日期"
value-format="yyyy-MM-dd"
:picker-options="pickerStartOptions(innerEndDate)"
:editable="false"
/>
<span class="ml10 mr10">-</span>
<el-date-picker
v-model="innerEndDate"
type="date"
placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerEndOptions(innerBeginDate)"
:editable="false"
/>
</div>
方法:
pickerStartOptions(endTime) {
return {
disabledDate(time) {
if (endTime) {
return time.getTime() > new Date(endTime).getTime()
}
}
}
},
pickerEndOptions(startTime) {
return {
disabledDate(time) {
if (startTime) {
return time.getTime() < new Date(startTime).getTime()
}
}
}
},
表单筛选项重置
resetQuery() {
this.queryParam = this.$options.data().queryParam
this.handleQuery()
}
以下方法自行修改
queryParam为 form表单筛选对象
handleQuery为 重置后重新搜索
过滤掉对象空值
filterNonEmptyValues(obj) {
return Object.fromEntries(
Object.entries(obj).filter(
([_, value]) =>
value !== null &&
value !== undefined &&
!(typeof value === 'string' && value.trim() === '') &&
!(Array.isArray(value) && value.length === 0)
)
)
}
页面使用:
const obj = {
a: '',
b: [],
c: null,
d: undefined,
f: 123,
e: 789,
q: ' '
};
const filteredObj = filterNonEmptyValues(obj);
console.log(filteredObj);
输出:
{
f: 123,
e: 789
}
感谢你的阅读,如对你有帮助请收藏+关注!
只分享干货实战和精品,从不啰嗦!!!
如某处不对请留言评论,欢迎指正~
博主可收徒、常玩QQ飞车,可一起来玩玩鸭~