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

<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, 就能解决所有数学难题了的一帮人, 我要尝试让他功能丰富一点, 在一个就是关于动态增加验证条件的一些实现, 希望大家能有点收获