如何根據(jù)業(yè)務封裝自己的功能組件

<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>

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

 <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"  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>
   <!--判斷是否顯示頁碼條-->
   <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>

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

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

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

//回顯功能, 可以拿到單選數(shù)據(jù)
  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;
   })
  }

 searchDataList:{}
  searchPaging:{}