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

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

javascript 复制代码
cancelDialog(diaLog, formRef) {
  this[diaLog] = false
  if (formRef) {
    this.$refs[formRef].resetFields()
  }
}

页面使用:

javascript 复制代码
<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:

javascript 复制代码
<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>

方法:

javascript 复制代码
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()
      }
    }
  }
},

表单筛选项重置

javascript 复制代码
resetQuery() {
  this.queryParam = this.$options.data().queryParam
  this.handleQuery()
}

以下方法自行修改

queryParam为 form表单筛选对象

handleQuery为 重置后重新搜索

过滤掉对象空值

javascript 复制代码
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)
    )
  )
}

页面使用:

javascript 复制代码
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飞车,可一起来玩玩鸭~

相关推荐
中微子1 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游1 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
markyankee1012 分钟前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
中微子3 分钟前
智能前端实践之 shot-word demo
前端
归于尽3 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户9873824581014 分钟前
vite 插件
前端
无数山6 分钟前
autorelease pool
前端
支撑前端荣耀6 分钟前
四、Cypress测试框架拆解
前端
杨进军6 分钟前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架
coding随想10 分钟前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript