如何一步步基於element-ui封裝查詢組件

功能

接著前一篇文章基於element-ui框架封裝一個更好用的表格組件,我們開始寫查詢組件. 查詢組件的話,需要有什麼呢? 下面我畫瞭一個粗略的原型,基本描述瞭查詢組件需要實現的功能瞭。

在這裡插入圖片描述

基本的查詢功能 [輸入條件,選擇下拉數據點擊查詢]

添加查詢下拉面板 [很多查詢的話,一行放不下,需要給一下更多查詢下拉面板,除掉默認查詢的條件,都放下拉面板去,具體默認查詢條件放幾個,可以做成通過傳入的參數控制]

添加條件展示 [如果有更多查詢面板的話,不打開查詢面板,根本不清楚數據是根據哪些條件查出來的.]

添加功能按鈕區 [一般放置增刪改等批量操作的功能按鈕]

基本的查詢功能

查詢功能的話,需要搭配element-ui的輸入框、下拉框、日期框等組件去實現,而用我們的組件的話,希望用一個數組去描述這個查詢條件,然後組件根據數組去把條件給識別並渲染出來. 首先,我們得先定義一下這個數組到底長什麼樣.

// methods
initSearch () {
  const searchArr = this.searchArr
  if (searchArr && searchArr.length) {
    let searchForm = {}
    searchArr.forEach((val) => {
      searchForm[val.key] = ''
    })
    this.searchForm = searchForm
  }
}
// mounted
mounted () {
    this.initSearch()
},

目前最基本的就是這三個字段瞭,字段意義在代碼註釋已經寫明白瞭。 後邊這個對象裡邊可能還會擴展一些其他的字段. 比如下拉數據, 它一般都是通過後臺接口給到前端, 我們可以在這裡添加一個url、param、method來去定義接口的名稱、參數和請求方式. 當然後面實現的時候,我們再說. 那麼我們開始開發吧.

查詢條件初始化

外部我們傳入瞭searchArr數據後,我們得先在mounted的時候,遍歷它,給內容定義的查詢條件searchForm設置響應式數據.

// methods
initSearch () {
  const searchArr = this.searchArr
  if (searchArr && searchArr.length) {
    let searchForm = {}
    searchArr.forEach((val) => {
      searchForm[val.key] = ''
    })
    this.searchForm = searchForm
  }
}
// mounted
mounted () {
    this.initSearch()
},

渲染頁面

因為我們設計的查詢頁面是兩部分的,包括展示在外邊的查詢條件和展示在更多的查詢條件. 這樣的話,如果我們在template裡邊把結構定義好的話,會發現,兩遍需要寫重復的代碼。 如果後邊擴展新功能上去的話,又是一個不好受的體力活瞭. 所以我們這邊就在render函數裡邊寫jsx,這樣可以讓結構更靈活,代碼可以更好的復用. 思路說完瞭,那麼開始寫代碼瞭

// props 傳入一個searchArr數組描述查詢條件都有哪一些
/**
 * 查詢條件描述
 */
searchArr: {
  type: Array,
  default: () => []
},
// data 定義兩個變量,searchForm:傳遞到後臺的查詢字段,selectOption:下拉數據
searchForm: {},
selectOption: {}
// mounted 初始化數據
initSearch () {
  const searchArr = this.searchArr
  if (searchArr && searchArr.length) {
    let searchForm = {}
    searchArr.forEach((val) => {
      searchForm[val.__key] = '' // 把用戶定義的字段拿出來,放到searchForm裡邊,再賦值一個空字符串
      this.setOption(val) // 如果是下拉數據的話,去把下拉的列表賦值一下放到selectOption裡邊
    })
    this.searchForm = searchForm
  }
},
// methods 設置下拉數據
async setOption (val) {
  if (~['select', 'mulSelect'].indexOf(val.__type)) {
    // 第一種情況如果下拉數據是本地寫死的
    if (val.data && Array.isArray(val.data)) {
      this.$set(this.selectOption, val.__key, val.data)
    } else if (val.fetchUrl) {
      // 第二種情況,如果下拉數據是從後臺接口傳遞過來的數據
      const result = await request({
        url: val.fetchUrl,
        method: val.method || 'post'
      })
      if (result && result.data && result.data.success) {
        this.$set(this.selectOption, val.__key, result.data.list || [])
      }
    }
  }
},

好的,我們完成初始化工作後,就可以在進行渲染工作瞭,前面我們說到,我們采用render函數裡邊寫jsx會更靈活一點,那麼我們開始寫這部分的工作吧.

// render 函數
<div class="searchTable">
    <el-form
      inline={true}
      props={{model: this.searchForm}}
      ref="searchForm"
      class="searchForm">
      { 
        searchArr.map((o) => {
          return components[o.__type] ? components[o.__type](h, o, this) : ''
        })
      }
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" on-click={ queryTable }>查詢</el-button>
        <el-form-item>
          <el-link 
            style="margin-left: 10px;"
            type="primary" 
            underline={ false } 
            on-click={ () => { this.moreShow = !this.moreShow } }>更多查詢
          </el-link>
        </el-form-item>
      </el-form-item>
      <div class="more-search animated" 
           class={ this.moreShow ? 'fadeInDown' : 'fadeOutUp' } 
           v-show={ this.moreShow }>
           // ...更多查詢
      </div>
    </el-form>
</div>

在jsx中操作有個地方值得註意一下,在最新的vue-cli中,是已經支持瞭在jsx中使用v-model等指令,但是element-ui中的el-input使用會報錯,下方使用的v-show指令就可以用的. 但是其實v-model也隻是一個語法糖而已,我們這裡就使用input事件拿到最新的輸入數據,然後再賦值給searchForm. 這段代碼是抽離出來瞭的,因為外部顯示的查詢條件和收縮的查詢條件都得用到它,抽離出來後,就不用寫重復的邏輯瞭。 以下是抽離的components組件

  /**
   * 輸入框 為什麼抽離? 這裡我們隻是做表格查詢需要。 
   * 其實如果要封裝彈窗框那種表單提交組件。 也可以復用這裡的邏輯
   * @param { Function } h vue提供的h函數
   * @param { Object } item 用戶寫入的描述對象
   * @param { Object } vm vue實例
   */
  export const input = function (h, item, vm) {
    const { searchForm } = vm
    return (
      <el-form-item label={item.label}>
        <el-input
          size="small"
          on-input={(v) => { searchForm[item.__key] = v }}
          props={{
            value: searchForm[item.__key],
            placeholder: "輸入內容信息",
            ...item
          }}
        >
        </el-input>
      </el-form-item>
    )
  }

  /**
   * 
   * @param { Function } h vue提供的h函數
   * @param { Object } item 用戶寫入的描述對象
   * @param { Object } vm vue實例
   */
  export const select = function (h, item, vm) {
    const { 
      searchForm = {}, 
      selectOption = {}, 
    } = vm
    /**
     * 監聽下拉改變事件
     * @param { String | Number | Boolean } value 選擇下拉數據的值
     * @param { Object } value 
     */
    const selectChange = function (value, item) { 
      searchForm[item.__key] = value
      vm.$emit('on-change', value)
    }
    return (
      <el-form-item label={item.label}>
        <el-select
          props={{
            value: searchForm[item.__key],
            placeholder: "===請選擇===",
            filterable: true,
            clearable: true,
            ...item
          }}
          on-change={ (val) => { selectChange(val, item) } }
          size="small">
            {
              selectOption[item.__key] && selectOption[item.__key].map((o) => {
                return (
                  <el-option 
                    key={ o.value } 
                    label={ o.text } 
                    value={ o.value } >
                  </el-option>
                )
              })
            }
        </el-select>
      </el-form-item>
    )
  }
  
    /**
   * 
   * 多選的下拉框,可以再單選基礎上加上兩個屬性,寫一個這個方法,用戶可以稍微少些幾個單詞.
   * @param { Function } h vue提供的h函數
   * @param { Object } item 用戶寫入的描述對象
   * @param { Object } vm vue實例
   */
  export const mulSelect = function (h, item, vm) {
    item['multiple'] = true
    item['collapse-tags'] = true
    return select(h, item, vm)
  }

以上其實就是把element的幾個組件抽離成獨立的方法,我們在外邊組件使用的時候,就能直接根據用戶傳遞的type,匹配到對應的組件渲染瞭。 並且後邊要增加新的查詢組件的話,隻要在這裡擴展就行,不用修改其他地方。 更容易維護。 另外我們在組件內部默認一些行為,比如默認下拉可以搜索,默認有清空按鈕等,如果系統不需要的話,也可在searchArr去寫上對應屬性覆蓋.

    return components[o.__type] ? components[o.__type](h, o, this) : ''

基本的渲染就寫好瞭, 然後我們在外邊使用組件

searchArr: [
    {
      __type: 'input',
      label: '姓名',
      __key: 'name'
    },
    {
      __type: 'select',
      label: '性別',
      __key: 'sex',
      fetchUrl: '/getSelect',
      method: 'post'
      // data: [
      //   { text: '男', value: '1' },
      //   { text: '女', value: '0' },
      // ]
    },
]

寫上對應的mock數據

Mock.mock(/\/getSelect/, 'post', () => {
  return {
    status: 200,
    success: true,
    message: '獲取成功',
    list: [
      {
        text: '男人',
        value: '1'
      },
      {
        text: '女人',
        value: '2'
      }
    ],
    total: data.list.length
  }
})

在這裡插入圖片描述

ok, 以上就簡單的把條件通過數組描述的方式渲染出來瞭。 接下來,我們得做更多查詢面板的查詢條件.

更多查詢以及展示優化

外邊展示的查詢條件按用戶給的數量展示多少個,更多查詢也可按照用戶給定的參數展示一行展示多少個

=============== props ===============
/**
 * 外部查詢條件展示多少個
 */
frontCount: {
  type: Number,
  default: 2
},
/**
 * 更多查詢條件展示多少個
 */
backCount: {
  type: Number,
  default: 3
}
=============== end props ===============

=============== computed ===============
// 顯示在頁面上的查詢條件
frontSearchArr: function () {
  return this.searchArr.slice(0, this.frontCount)
},
// 顯示在更多查詢裡邊的條件
backSearchArr: function () {
  return this.searchArr.slice(this.frontCount, this.searchArr.length)
},
// 返回寬度
getSpan: function () {
  const yu = this.backSearchArr.length % this.backCount // 餘數
  const duan = 24 / this.backCount // 每個條件的寬度
  if (yu === 0) {
    return 24
  } else {
    return 24 - duan
  }
}
=============== end computed ===============

============== render ==============
  <div
    style={`width: ${this.backCount * 265 + 30}px`}
    class={ this.moreShow ? `${className} fadeInDown` : `${className} fadeOutUp` } 
    v-show={ this.moreShow }>
    <el-row>
    {
      backSearchArr.map((o) => {
        return (
          <el-col span={24 / this.backCount}>
            { components[o.__type] ? components[o.__type](h, o, this) : '' }
          </el-col>
        )
      })
    }
      <el-col class="searchBtn" span={ getSpan } >
        <el-button size="small" type="primary" icon="el-icon-search" on-click={ queryTable }>查詢</el-button>
        <el-button size="small" type="default" icon="el-icon-upload2" on-click={ () => {  this.moreShow = !this.moreShow  } }>收縮</el-button>
      </el-col>
    </el-row>
  </div>
============== end render ==============

在計算屬性裡邊設置外部顯示的數據和內部顯示的數據。 把數據切割成兩部分. 搜索組件固定長度265. 然後根據條件計算出來更多查詢面板的寬度,再根據getSpan計算屬性算每行數據給的span寬度是多少. 查詢和收縮按鈕根據查詢條件的多少,去計算它放哪個位置。

在這裡插入圖片描述
在這裡插入圖片描述

經測試,效果基本上符合要求.

下拉組件聯動查詢

比如我們需要用我們的查詢組件寫三級聯動的話,應該怎麼實現呢?

選擇省後,需要根據選擇的省加載對應的市下拉數據

如果刪除省後,需要把對應的省和市的下拉也清空掉

聯動主要就是做好這兩塊功能。 一塊是加載對應數據,一塊清空對應數據. ok, 清楚需要做什麼瞭,我們就開始著手怎麼做吧.

{
  __type: 'select',
  __key: 'province',
  __fetchUrl: '/getProvince',
  __method: 'get',
  __nextKey: 'city',
  __nextFetch: '/getCity',
  __nextParam: ['province'],
  __nextMethod: 'get',
  __emptyArr: ['city', 'district'],
  label: '省',
  labelWidth: '40px',
},
{
  __type: 'select',
  __key: 'city',
  __method: 'get',
  __nextKey: 'district',
  __nextFetch: '/getDistrict',
  __nextParam: ['province', 'city'],
  __nextMethod: 'get',
  __emptyArr: ['district'],
  label: '市',
  labelWidth: '40px',
},
{
  __type: 'select',
  __key: 'district',
  label: '區',
  labelWidth: '40px',
}

其中獲取省的數據,其實隻要寫__fetchUrl: ‘/getProvince’和__method: ‘get’定義請求接口就可以拿到下拉數據瞭。 然後選擇省下拉的時候,需要在change事件裡邊去根據選擇的省請求數據. 這時候我們需要在數據裡邊定義一下change的時候,需要做的事情. 下面看一下代碼:

__nextKey: 'city',                 // 給哪一個下拉數據賦值
__nextFetch: '/getCity',           // 賦值的請求接口
__nextParam: ['province'],         // 請求參數
__nextMethod: 'get',               // 請求方式
__emptyArr: ['city', 'district']   // 當修改瞭下拉數據的時候,需要清空哪些下拉類別的值

/**
 * 監聽下拉改變事件
 * @param { String | Number | Boolean } value 選擇下拉數據的值
 * @param { Object } value 
 */
const selectChange = async function (value, item) { 
  searchForm[item.__key] = value
  // 置空下拉列表和下拉數據
  if (item && item.__emptyArr) {
    for (let i = 0; i < item.__emptyArr.length; i++) {
      let key = item.__emptyArr[i]
      if (selectOption[key]) {
        selectOption[key] = []
      }
      vm.$set(searchForm, key, '')
    }
  }
  if (item && item.__nextFetch && item.__nextParam) {
    let param = {}
    for (let j = 0; j < item.__nextParam.length; j++) {
      let value = searchForm[item.__nextParam[j]]
      if (value) {
        param[item.__nextParam[j]] = value
      }
    }
    const res = await request({
      url: item.__nextFetch,
      method: item.__nextMethod || 'post'
    }, param)
    if (res) {
      let { data } = res
      if (data && data.success) {
        vm.$set(selectOption, item.__nextKey, data.list)
      }
    }
  }
  vm.$emit('on-change', value)
}

ok, 這樣基本就完成瞭三級聯動的功能瞭。 以下是效果圖

在這裡插入圖片描述

組件擴展

組件擴展就很簡單瞭,如果我們還缺少一些需要的組件,可以直接在components.js裡邊新增一個

/**
 * 日期選擇器 
 * @param {*} h 
 * @param {*} item 
 * @param {*} vm 
 */
export const date = function (h, item, vm) {
  const { searchForm } = vm
  return (
    <el-form-item label={item.label} labelWidth={item.labelWidth}>
        <el-date-picker
        on-input={(v) => { searchForm[item.__key] = v }}
        props={{
          type: 'date',
          size: 'small',
          value: searchForm[item.__key],
          placeholder: "選擇日期",
          ...item
        }}
      >
      </el-date-picker>
    </el-form-item>
  )
}

// searchArr使用的時候添加
{
  __type: 'date',
  __key: 'birthday',
  label: '生日'
}

其他地方都不用修改,就完成瞭一個新查詢條件類型的添加瞭. 以下是效果

在這裡插入圖片描述

搜索條件展示

搜索條件功能比較簡單,就是在用戶點擊搜索後,顯示輸入的條件. 我們把這個分離出來作為一個獨立的小組件

        <query-info ref="queryInfo" on-remove={this.removeTag} selectionOption={ this.selectOption }></query-info>

這個組件傳入下拉數組過去,我們在設計的時候,有說過,他還可以點擊叉刪除條件,所以得拋出來一個remove自定義事件,然後刪除掉條件後,我們把這個條件清空,然後調用查詢方法. 查詢的時候,再去把搜索條件傳遞給組件,讓組件顯示出來。 這裡需要註意,我們不能直接把搜索條件通過props傳入到組件裡邊,如果是這樣傳入的話,由於數據是響應式的,在你輸入條件的時候,下方就會顯示出來,這並不是我們想要的效果,我們想要的效果是在點擊查詢按鈕的時候,展示正在查詢的查詢條件. 所以這裡的話,我們就在查詢按鈕方法裡邊,直接去調用它內部的方法把條件傳入過去,然後內部再利用JSON.parse(JSON.stringify(val))的方式,實現一個深拷貝,讓數據和外部數據隔離開.

removeTag (name) {
  this.searchForm[name] = ''
  this.queryTable()
}

// 查詢
queryTable () {
  this.$refs.queryInfo && this.$refs.queryInfo.queryTable(this.searchForm)
  this.moreShow = false
  this.$emit('search', this.searchForm)
}

組件的實現如下:

<template>
  <div class="queryInfo">
    <el-tag
      v-for="tag in tags"
      :key="tag"
      closable
      style="margin-right: 10px;"
      @close="close(tag)"
      >
      {{displayName(tag)}}
    </el-tag>
  </div>
</template>

<script>
import { getTitle } from '@/utils/utils'
export default {
  props: {
    // 下拉數據
    selectionOption: {
      type: Object,
      default: () => []
    }
  },
  data () {
    return {
      // 查詢條件
      searchForm: {}
    }
  },
  computed: {
    /// 計算出輸入的條件的數組
    tags: function () {
      let tags = []
      let keys = Object.keys(this.searchForm)
      keys.forEach((key) => {
        if (this.searchForm[key]) {
          tags.push(key)
        }
      })
      return tags
    }
  },
  methods: {
    // 點擊關閉
    close (tag) {
      this.searchForm[tag] = ''
      this.$emit('remove', tag)
    },
    // 外部調用的方法
    queryTable (searchForm) {
      this.searchForm = JSON.parse(JSON.stringify(searchForm))
    },
    // 顯示名稱, 如果是下拉數據,則去下拉數據裡邊匹配到名稱顯示出來
    displayName(key) {
      let value = this.searchForm[key]
      if (this.selectionOption[key]) {
        return getTitle(value, this.selectionOption[key])
      } else {
        return value
      }
    }
  }
}
</script>

<style scoped>
.queryInfo {
  margin-bottom: 10px;
}
</style>

實現的效果如下:

在這裡插入圖片描述

添加功能按鈕區

這個目前就在searchTable組件用插槽的方式加入

<div class="right">
  {this.$slots.rightButton}
</div>

// 使用
<search-table :searchArr="searchArr" @search="search">
  <template v-slot:rightButton>
    <el-button 
      size="small" 
      type="success" 
      @click="() => { MessageBox({ message: '開發中', type: 'warning' })}">
      添加
    </el-button>
  </template> 
</search-table>
復制代碼

效果:

在這裡插入圖片描述

寫在最後

那麼至此,查詢組件想要實現的一些功能都一一實現好瞭. 其實做起來並不復雜,最重要的點不在於做,而在於做之前要想清楚. 後面我們再把動態表頭給做好,那麼大致關於表格這塊的相關需求就完成瞭.

也可以給我們的開源項目點點star: http://github.crmeb.net/u/defu 不勝感激 !

到此這篇關於如何一步步基於element-ui封裝查詢組件的文章就介紹到這瞭,更多相關element-ui封裝查詢組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: