查詢回顯input的封

最近有幸在做一個(gè)管理系統(tǒng)采用的是vue+element-ui, 表單頁(yè)面非常多, 而且都出奇的大,在多頁(yè)面開發(fā)的時(shí)候做大表單的優(yōu)缺點(diǎn)我大概先說一下, 我們的任務(wù)是, 基于現(xiàn)在的工具, 使他更簡(jiǎn)潔, 功能也不差, 而且更利于開發(fā), 維護(hù)

直接進(jìn)入正題

功能是這樣:

表單中常有的功能是一個(gè)input綁定一個(gè)按鈕, 當(dāng)我點(diǎn)擊按鈕的時(shí)候, 彈出查詢框, 里面有個(gè)小列表, 查到數(shù)據(jù)后點(diǎn)一行再回顯, 很簡(jiǎn)單的需求, 但是會(huì)有大量的應(yīng)用地點(diǎn), 所以肯定不能復(fù)制粘貼, 輸入框我們每次都可以寫, 但是彈出來的小查詢?nèi)绻總€(gè)表單, 每個(gè)獨(dú)立的彈框再去重復(fù)寫就麻煩了, 但是如果我們把它提出來我們就輕松很多, 通過數(shù)據(jù)去控制功能

有些人可能覺得都是廢話, 而且就這么個(gè)簡(jiǎn)單的東西, 寫這么多有必要么(我想盡量的把我想到的說出來, 手動(dòng)滑稽)

要做的就是這個(gè)查詢的小列表, 我們整理一下要做的事情, 先做規(guī)劃再寫代碼, 避免邊寫邊改, 不然會(huì)讓代碼越來越難維護(hù), 寫到下面發(fā)現(xiàn)上面不該那么寫, 再去改又懶的改, 然后就郁悶著勉為其難的提交上去了, 雖然功能在但自己看著都......

1. 分析需求: 我們需要什么元素?

1. a. 一個(gè)form表單, 一個(gè)table, 分頁(yè)(布局)
2. b. n個(gè)條件框, 查詢按鈕, 重置按鈕, 其他功能按鈕(form內(nèi)部)

通過整理元素我們知道, 有幾樣?xùn)|西是固定的, 一個(gè)form, 一個(gè)不知道幾列的table, 一個(gè)分頁(yè)功能,查詢, 重置按鈕

整理出這個(gè)我們就可以第一步把元素構(gòu)建全, 可能有n個(gè)的我們就用一個(gè)先占個(gè)位置, 結(jié)構(gòu)如下:

<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的地方代表了接下來我們要用循環(huán)創(chuàng)建

2. 我們需要實(shí)現(xiàn)什么方法并且那些是要外部傳遞的

1. a. 查詢
2. b. 點(diǎn)擊分頁(yè)后查詢數(shù)據(jù)
3. c. 重置
4. d. 選中一行時(shí)拿到數(shù)據(jù)
5. e. 其余功能的觸發(fā)

這樣一梳理, 就很清晰了, 因?yàn)槲覀兊牟閿?shù)據(jù)和分頁(yè)在一個(gè)接口中我就講分頁(yè)查詢, 和普通查詢放到了一個(gè)函數(shù)里, 所以methods中實(shí)現(xiàn)剩下的四個(gè)方法

methods: {
 searchData(pageNum = 0) {
  //查詢數(shù)據(jù), ES6參數(shù)賦值默認(rèn)為0頁(yè)
 },
 selectRowData(row) {
  //選中單行是觸發(fā)的函數(shù), 在各個(gè)ui框架table中都應(yīng)該有這個(gè)方法, 我們只要實(shí)現(xiàn)它就行了
 },
 resetSearchForm() {
  //重置form參數(shù)
 },
 doFunction(){
  //執(zhí)行其他函數(shù)
 }
}

好了, 接下來看看那些需要是外部傳入的方法, 以及為什么要從外部傳入

i. 首先是一個(gè)查詢數(shù)據(jù)的方法

理由: 我們需要從外部傳入, 這是個(gè)查詢列表的組件, 我們肯定不是只適用于一個(gè)接口, 而是盡量讓他各種各樣情形下都適用于我們

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

在vue中, 子組件是不能修改父組件的, 在框架封裝中大部分是作者自己封裝了dispatch 和 broadcast, 但是我們就應(yīng)用于自己的項(xiàng)目, 所以我們不用那么麻煩, 如果想用可以去ui框架源碼中復(fù)制一份出來用, 我們就通過父組件傳一個(gè)函數(shù)給子組件, 然后子組件調(diào)用這個(gè)函數(shù)回調(diào)給父組件就好了, 所以要傳一個(gè)函數(shù)

iii. 其他的執(zhí)行函數(shù)

3. 我們要vue的data參數(shù)了, 并確定哪些是在組件中, 哪些是外部傳入

a. from表單的數(shù)據(jù)綁定(但是我們不確定要有幾個(gè)框所以這里要多留一步)

沒錯(cuò)就這一個(gè)就夠了, 我們要做的是可動(dòng)態(tài)配置所以更多的來自于傳參

1. a. 傳入一個(gè)input數(shù)組, 決定有幾個(gè)條件搜索框
2. b. 傳入table的列的數(shù)組, 附帶上每列寬度, 列名
3. c. 傳入其他功能按鈕列表數(shù)組
4. d. 傳入查詢出來的分頁(yè)參數(shù)
5. e. 傳入查詢出來的數(shù)據(jù)列表數(shù)組

4. 有了這些我們接下來就是一一實(shí)現(xiàn)這些東西就好了

還是先從結(jié)構(gòu)開始

 <div class="searchAlert">
   <div class="inputBox">
    <el-form :inline="true" :model="searchForm" class="searchAlertForm" ref="searchForm">
    <!--循環(huán)創(chuàng)建條件搜索框-->
     <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">
     <!--循環(huán)創(chuàng)建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>
   <!--判斷是否顯示頁(yè)碼條-->
   <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. 實(shí)現(xiàn)可供循環(huán)創(chuàng)建的數(shù)組結(jié)構(gòu)

a. form(先創(chuàng)建一個(gè), 然后放到數(shù)組中就好了)

{
 label:"輸入框的名稱"
 dataName:"作為雙向數(shù)據(jù)綁定的名字, 同時(shí)作為綁定prop的名字"
}

 現(xiàn)在來看我們是不能在這個(gè)組件中直接定義好form的model結(jié)構(gòu)的, 我們就要?jiǎng)討B(tài)創(chuàng)建, 在組件中我們只要?jiǎng)?chuàng)建一個(gè)空的對(duì)象就好了

b. table-col

{
 label:"列名稱"
 prop:"對(duì)應(yīng)列內(nèi)容的字段名"
 width:"單列寬度"
}

c. button

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

6. 接下來我們?nèi)?shí)現(xiàn)我們要傳入的方法

//回顯功能, 可以拿到單選數(shù)據(jù)
  searchCbFn(rowData) {
   console.log(rowData)
  },
  //查詢功能, 分頁(yè)等
  searchFn(formData, pageNum = 0) {
   api({formData:formData, pageData:pageNum}).then(res => {
    console.log(res.data)
    this.searchDataList = res.data.dataList
    //頁(yè)面展示 分頁(yè)大小控制
    this.searchPaging = { ...pagInfo, pageSize: 5 }
   }).catch(err => {
    throw err;
   })
  }

7. 最后我們就要補(bǔ)齊所有傳入?yún)?shù)

 searchDataList:{}
  searchPaging:{}

最后總結(jié)

這是我第一次寫分享問, 所以應(yīng)該還欠缺寫邏輯, 如果什么不懂, 或者建議, 請(qǐng)多多告訴我, 代碼我放在:https://github.com/wqliusong/happy有組件, 有可以直接運(yùn)行的單頁(yè)面

再說一下我遇到的問題吧, 一個(gè)就是vue的雙向數(shù)據(jù)綁定是可以動(dòng)態(tài)的,提醒一下大家, 對(duì)象后加動(dòng)態(tài)的名字要用[], 不能用.的, 注意我的input那里就懂了, data里的參數(shù)也可以動(dòng)態(tài)創(chuàng)建的, 有了這些我們可以解決很多問題, 所以我們不用很在意他的初始數(shù)據(jù)格式

接下來我還會(huì)寫一個(gè)多行編輯的組件, 雖然很多ui中也有, 但是功能都略顯單一, 可能我們程序員就是只要會(huì)1+1=2, 就能解決所有數(shù)學(xué)難題了的一幫人, 我要嘗試讓他功能豐富一點(diǎn), 在一個(gè)就是關(guān)于動(dòng)態(tài)增加驗(yàn)證條件的一些實(shí)現(xiàn), 希望大家能有點(diǎn)收獲

以上所述是小編給大家介紹的Vue封裝功能組件詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論