当前位置：首页 > news >正文

Vue2+Element-ui后台系统常用js方法

news 2025/8/1 18:14:41

el-dialog弹框关闭清空form表单并清空验证

cancelDialog(diaLog, formRef) {this[diaLog] = falseif (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-pickerv-model="innerBeginDate"type="date"placeholder="开始日期"value-format="yyyy-MM-dd":picker-options="pickerStartOptions(innerEndDate)":editable="false"/><span class="ml10 mr10">-</span><el-date-pickerv-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().queryParamthis.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
}