Element-ui 搜索验证根据字段来提示

• utils.js 封装

import { Message } from 'element-ui'
/**
 *  @description 查询验证提示字段名称
 *  @param {Object} validObj 验证错误对象
 * @param {Object} strObj 验证字段名称对象F
 */
export const queryValideInfo = (validObj, strObj) => {
  const keyArr = Object.keys(validObj)
  if (keyArr.length === 1) {
    Message({
      message: `${strObj[keyArr[0]]}为必填项，请填写后查询。`,
      type: 'warning',
      duration: 5000,
    })
  } else {
    const valArr = []
    keyArr.forEach(e => valArr.push(strObj[e]))
    Message({ message: `${valArr.join('、')} 均为必填项，请填写后查询。`, type: 'warning', duration: 5000 })
  }
}

• demo.vue 使用示例

import { queryValideInfo } from '@/utils'

export default {
  data() {
    // 必填项验证规则
    this.rules = {
      bussType: [{ required: true, message: ' ', trigger: 'change' }],
      date: [{ required: true, message: ' ', trigger: 'change' }],
    }

    return {
      // 请求参数
      params: {
        date: '', // 日期
        bussType: '', // 操作类型
      },
    }
  },
  methods: {
    /**
     * @description 搜索
     */
    searchForm() {
      this.$refs.searchForm.validate((valid, validObj) => {
        // 这里定义必填项字段名称，key 需要跟 请求参数 绑定的 key 一致
        const strObj = { date: '日期', bussType: '操作类型' }
        valid ? this.$emit('search') : queryValideInfo(validObj, strObj)
      })
    },
  },
}