如何根据业务封装自己的功能组件

<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) {
  //查询数据, ES6参数赋值默认为0页
 },
 selectRowData(row) {
  //选中单行是触发的函数, 在各个ui框架table中都应该有这个方法, 我们只要实现它就行了
 },
 resetSearchForm() {
  //重置form参数
 },
 doFunction(){
  //执行其他函数
 }
}

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

{
 label:"输入框的名称"
 dataName:"作为双向数据绑定的名字, 同时作为绑定prop的名字"
}

{
 label:"列名称"
 prop:"对应列内容的字段名"
 width:"单列宽度"
}

{
 name:"事件和按钮名字",
 type:"按钮类型"
}

//回显功能, 可以拿到单选数据
  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:{}