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

news2024/11/24 16:45:53

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
}