如何根據業務封裝本身的功能組件

查詢回顯input的封裝

最近有幸在作一個管理系統採用的是vue+element-ui, 表單頁面很是多, 並且都出奇的大,在多頁面開發的時候作大表單的優缺點我大概先說一下, 咱們的任務是, 基於如今的工具, 使他更簡潔, 功能也不差, 並且更利於開發, 維護

直接進入正題

功能是這樣:

表單中常有的功能是一個input綁定一個按鈕, 當我點擊按鈕的時候, 彈出查詢框, 裏面有個小列表, 查到數據後點一行再回顯, 很簡單的需求, 可是會有大量的應用地點, 因此確定不能複製粘貼, 輸入框咱們每次均可以寫, 可是彈出來的小查詢若是每一個表單, 每一個獨立的彈框再去重複寫就麻煩了, 可是若是咱們把它提出來咱們就輕鬆不少, 經過數據去控制功能

有些人可能以爲都是廢話, 並且就這麼個簡單的東西, 寫這麼多有必要麼(我想盡可能的把我想到的說出來, 手動滑稽)

要作的就是這個查詢的小列表, 咱們整理一下要作的事情, 先作規劃再寫代碼, 避免邊寫邊改, 否則會讓代碼愈來愈難維護, 寫到下面發現上面不應那麼寫, 再去改又懶的改, 而後就鬱悶着勉爲其難的提交上去了, 雖然功能在但本身看着都......

1. 分析需求: 咱們須要什麼元素?

a. 一個form表單, 一個table, 分頁(佈局)

b. n個條件框, 查詢按鈕, 重置按鈕, 其餘功能按鈕(form內部)

經過整理元素咱們知道, 有幾樣東西是固定的, 一個form, 一個不知道幾列的table, 一個分頁功能,查詢, 重置按鈕

整理出這個咱們就能夠第一步把元素構建全, 可能有n個的咱們就用一個先佔個位置, 結構以下:

<div class="box">
  <div class="form">
    <form action="">
      <input type="text"> *n
    </form>
  </div>
  <div class="table">
    <table>
      <tr> *n
        <td></td>
      </tr>
    </table>
  </div>
  <div class="paging"></div>
  <div class="button">
    <button>查詢</button>
    <button>重置</button>
    <button>其他功能</button> *n
  </div>
</div>
複製代碼

*n的地方表明了接下來咱們要用循環建立

2. 咱們須要實現什麼方法而且那些是要外部傳遞的

a. 查詢

b. 點擊分頁後查詢數據

c. 重置

d. 選中一行時拿到數據

e. 其他功能的觸發

這樣一梳理, 就很清晰了, 由於咱們的查數據和分頁在一個接口中我就講分頁查詢, 和普通查詢放到了一個函數裏, 因此methods中實現剩下的四個方法

methods: {
  searchData(pageNum = 0) {
    //查詢數據, ES6參數賦值默認爲0頁
  },
  selectRowData(row) {
    //選中單行是觸發的函數, 在各個ui框架table中都應該有這個方法, 咱們只要實現它就好了
  },
  resetSearchForm() {
    //重置form參數
  },
  doFunction(){
    //執行其餘函數
  }
}
複製代碼

好了, 接下來看看那些須要是外部傳入的方法, 以及爲何要從外部傳入

i. 首先是一個查詢數據的方法

理由: 咱們須要從外部傳入, 這是個查詢列表的組件, 咱們確定不是隻適用於一個接口, 而是儘可能讓他各類各樣情形下都適用於咱們

ii. 選中單行後要傳給父組件的方法

在vue中, 子組件是不能修改父組件的, 在框架封裝中大部分是做者本身封裝了dispatch 和 broadcast, 可是咱們就應用於本身的項目, 因此咱們不用那麼麻煩, 若是想用能夠去ui框架源碼中複製一份出來用, 咱們就經過父組件傳一個函數給子組件, 而後子組件調用這個函數回調給父組件就行了, 因此要傳一個函數

iii. 其餘的執行函數

3. 咱們要vue的data參數了, 並肯定哪些是在組件中, 哪些是外部傳入

a. from表單的數據綁定(可是咱們不肯定要有幾個框因此這裏要多留一步)

沒錯就這一個就夠了, 咱們要作的是可動態配置因此更多的來自於傳參

a. 傳入一個input數組, 決定有幾個條件搜索框

b. 傳入table的列的數組, 附帶上每列寬度, 列名

c. 傳入其餘功能按鈕列表數組

d. 傳入查詢出來的分頁參數

e. 傳入查詢出來的數據列表數組

4. 有了這些咱們接下來就是一一實現這些東西就行了

仍是先從結構開始

<div class="searchAlert">
      <div class="inputBox">
        <el-form :inline="true" :model="searchForm" class="searchAlertForm" ref="searchForm">
        <!--循環建立條件搜索框-->
          <el-form-item v-for="item in inputarr" :key="item.label" :prop="item.dataName">
            <el-tooltip :content="item.label" placement="top">
              <el-input v-model="searchForm[item.dataName]" :placeholder="item.label" size="mini"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableBox">
        <el-table :data="searchdatalist" style="width: 100%" size="mini" highlight-current-row
          @current-change="selectrowdata" :border="true">
          <!--循環建立table列-->
          <el-table-column v-for="item in coleumarr" :key="item.label" :prop="item.prop" :label="item.label"
            :width="item.width">
          </el-table-column>
        </el-table>
      </div>
      <!--判斷是否顯示頁碼條-->
      <div class="pagination" v-if="searchpaging">
        <el-pagination layout="prev, pager, next" :total="searchpaging.totalPage" :small="true"
          :page-size="searchpaging.pageSize" @current-change="searchdata">
        </el-pagination>
      </div>
      <div class="buttonBox">
        <el-button size="mini" @click="resetsearchform">重置</el-button>
        <el-button size="mini" @click="searchdata" type="primary">搜索</el-button>
        <el-button size="mini" v-for="btn in buttonArr" :key="btn.name" size="mini" @click="doFunction(btn.name)" :type="btn.type">btn.name</el-button>
      </div>
    </div>
複製代碼

5. 實現可供循環建立的數組結構

a. form(先建立一個, 而後放到數組中就行了)

{
  label:"輸入框的名稱"
  dataName:"做爲雙向數據綁定的名字, 同時做爲綁定prop的名字"
}
複製代碼

如今來看咱們是不能在這個組件中直接定義好form的model結構的, 咱們就要動態建立, 在組件中咱們只要建立一個空的對象就行了

b. table-col

{
  label:"列名稱"
  prop:"對應列內容的字段名"
  width:"單列寬度"
}
複製代碼

c. button

{
  name:"事件和按鈕名字",
  type:"按鈕類型"
}
複製代碼

6. 接下來咱們去實現咱們要傳入的方法

//回顯功能, 能夠拿到單選數據
    searchCbFn(rowData) {
      console.log(rowData)
    },
    //查詢功能, 分頁等
    searchFn(formData, pageNum = 0) {
      api({formData:formData, pageData:pageNum}).then(res => {
        console.log(res.data)
        this.searchDataList = res.data.dataList
        //頁面展現 分頁大小控制
        this.searchPaging = { ...pagInfo, pageSize: 5 }
      }).catch(err => {
        throw err;
      })
    }
複製代碼

7. 最後咱們就要補齊全部傳入參數

searchDataList:{}
    searchPaging:{}
複製代碼

最後總結:

這是我第一次寫分享問, 因此應該還欠缺寫邏輯, 若是什麼不懂, 或者建議, 請多多告訴我, 代碼我放在:https://github.com/wqliusong/happy有組件, 有能夠直接運行的單頁面

再說一下我遇到的問題吧, 一個就是vue的雙向數據綁定是能夠動態的,提醒一下你們, 對象後加動態的名字要用[], 不能用.的, 注意個人input那裏就懂了, data裏的參數也能夠動態建立的, 有了這些咱們能夠解決不少問題, 因此咱們不用很在乎他的初始數據格式

接下來我還會寫一個多行編輯的組件, 雖然不少ui中也有, 可是功能都略顯單一, 可能咱們程序員就是隻要會1+1=2, 就能解決全部數學難題了的一幫人, 我要嘗試讓他功能豐富一點, 在一個就是關於動態增長驗證條件的一些實現, 但願你們能有點收穫