前情提要

使用elementui的 el-table 和 el-pagination 搭建分頁表格數(shù)據(jù)，想要實(shí)現(xiàn)不同的搜索功能，跟后端一樣澡罚，類似下圖顯示：

image.png

實(shí)現(xiàn)方法

思考：
主要思考難點(diǎn)是怎么讓數(shù)據(jù)保持存在且不顯示？
可以利用數(shù)據(jù)的 雙向綁定屬性 實(shí)現(xiàn)掷豺，這里為 _hide账锹，為 true 則不顯示，反之生年，則顯示抱婉。

匹配的代碼大概如下：

// 前端搜索（簡版）
handleDataSearch(queryParams) {
    // 表單列表-查詢字段
    const conditions = [{......}]
    const subData = this.data
    if (subData && subData.length < 1) return
    for (let i = 0; i < subData.length; i++) {
      this.$set(subData[i], '_hide', false)
    }
    conditions.forEach(cond => {
      if (
        !cond.hasOwnProperty('searchType') ||
        cond.searchType.indexOf('precise') != -1
      ) {
        const { ct, qt, name, colPrefix, option } = cond
        const op = this.getQT(qt) // 獲取不同的條件值
        const path = 'Q$' + colPrefix + name + '$' + op
        let val = queryParams.fieldLogic[path]
        if (ct == 'number_range') { // 數(shù)字范圍蒸绩，兩個(gè)分開匹配
          const lVal =
            queryParams.fieldLogic[`Q$${colPrefix + name}$GE`]
          const rVal =
            queryParams.fieldLogic[`Q$${colPrefix + name}$LE`]
          this.doMatch(subData, lVal, 'GE', name, cond)
          this.doMatch(subData, rVal, 'LE', name, cond)
        } else {
          this.doMatch(subData, val, op, name, cond)
        }
      }
    })
},
// 用 正則表達(dá)式 進(jìn)行匹配
doMatch(arr, value, op, code, field) {
  const isDef = v => {
    return v !== undefined && v !== null && v !== ''
  }
  if (!isDef(value)) return // 沒有值輸入時(shí)患亿，不匹配
  const { ct, ty } = field
  if (ct == 'onetext' && ['為空', '不為空'].indexOf(value) > -1) {
    op = 'IS_UNDEF'
  } else if (
    (['number'].indexOf(ct) > -1 || ty == 'number') &&
    typeof value === 'string' &&
    value.length
  ) {
    value = +value
  } else if (op == 'IN' && value instanceof Array) {
    value = value.join(',')
  } else if (op === 'DBT' && typeof value === 'string') {
    value = value.split(',')
  }
  for (let i = 0; i < arr.length; i++) {
    let v = arr[i][code]
    if (
      op !== 'IS_UNDEF' &&
      (['number'].indexOf(ct) > -1 ||
        ty == 'number') &&
      typeof v === 'string' &&
      v.length
    ) {
      v = +v
    }
    let _hide = false
    // 沒有定義值時(shí)統(tǒng)一不符合篩選標(biāo)準(zhǔn)步藕，除非是 '為空' || '!=' 判斷
    switch (op) {
      case 'SE': // '='
      case 'S': // '='
        _hide = !(v === value)
        break
      case 'NE': // '!='
        _hide = v === value
        break
      case 'DS':
      case 'SLL': // 'left_like'
        _hide = v ? !new RegExp('^' + value).test(v) : true
        break
      case 'SLR': // 'right_like'
        _hide = v ? !new RegExp(value + '$').test(v) : true
        break
      case 'DYIN':
      case 'IN':
        _hide = v ? !new RegExp(v).test(value) : true
        break
      case 'DGR':
      case 'GT': // '>'
        _hide = !(v > value)
        if (
          ('date' == ct || 'DGR' == op) &&
          !_hide &&
          v.length > value.length
        ) {
          _hide = !(v.slice(0, value.length) > value) // 日期長度不一致時(shí)
        }
        break
      case 'DLE':
      case 'LT': // '<'
        _hide = isDef(v) ? !(v < value) : true
        break
      case 'DL':
      case 'GE': // '>='
        _hide = isDef(v) ? !(v >= value) : true
        break
      case 'DG':
      case 'LE': // '<='
        _hide = isDef(v) ? !(v <= value) : true
        if (('date' == ct || 'DG' == op) && _hide) {
          _hide = !new RegExp('^' + value).test(v) // 日期長度不一致時(shí)
        }
        break
      case 'DBT': // 日期范圍
        if (value[0]) {
          // '>='
          _hide = !(v >= value[0])
        }
        if (value[1] && !_hide) {
          // '<='
          _hide = v ? !(v <= value[1]) : true
          if (_hide) {
            _hide = !new RegExp('^' + value[1]).test(v)
          }
        }
        break
      case 'IS_UNDEF': // ['為空', '不為空']
        _hide = value == '為空' ? isDef(v) : !isDef(v)
        break
      case 'SL': // 'like'
      default:
        _hide = v ? !new RegExp(value).test(v) : true
        break
    }
    // 沒有隱藏(顯示的)的 -> 判斷是否隱藏
    if (!arr[i]._hide && _hide) {
      this.$set(arr[i], '_hide', _hide)
    }
  }
},

注明：本文僅用于學(xué)習(xí)記錄咙冗，如有侵權(quán)雾消，請聯(lián)系刪除！