二次封装CustomTableCustomTable是基于elementui的表格和分页一体化组件,支持elementui表格属性和方法的正常使用。为减少开发者开发新表格页面的重复工作量,只需传入表格接口及相关配置即可使用。一、开发1、保持元素组件属性和属性穿透。这种封装是对元素的二次封装。元素组件除了需要封装的功能外,props、event、slots等元素组件的原有属性按照原则不会改变。这时候就可以利用属性来实现属性穿透。监听事件穿透可以通过v-on实现将使用二级包组件时的事件监听绑定传递给element组件==*==但值得注意的是$listeners在vue3中已经去掉,实现效果已经包含在$attar中。所以当项目支持vue3时,就不需要v-on="$listeners"slot穿透,直接通过接收外界传入的自定义表格内容2.调用逻辑改变分页索引/每页数据条数→调用请求接口(保留其他请求参数)→更新表格更改请求参数→将分页索引返回到第一页→调用请求接口→更新表单使用此表单将不需要每次开发新的表单页面都重新实现相关业务逻辑2.使用说明1.使用示例{{scope.row.memberId!==-1?scope.row.memberId:''}}使用$refs获取customTable中的getListData请求函数,为了方便处理请求参数,直接在父页面处理请求参数,传入this.$refs['customTable'].getListData(filterFormObj)//调用2.属性2.1.基于elementui的customtable使用elementui表属性,直接调用elementui对应的属性,事件,槽特征等,无需重新学习2.2.请求接口api和requestMethod,requestConfig属性发送请求。listName为接口返回的列表名,默认为list,目前requestMethod请求方式只支持get和post请求,同时当请求方式为post时,组件会通过qs格式化请求格式。stringify()支持emotionalcrm参数的post请求格式。requestConfig用于设置axios请求头配置,传入格式例如:请求参数直接在父组件的调用点输入即可,如:this.$refs['customTable'].getListData(filterFormObj)表格带有loading属性。请求成功后,组件会将返回的data数据通过dataUpdates事件传递给父组件。2.3.PagingsimpleMode,countOption,pageCount设置分页组件属性。simpleMode表示分页是否为简单模式,默认值为No。countOption为页码和显示数的选择,仅在普通模式下有效。2.4.表配置有序设置表是否有序号3.总结第一次尝试封装组件时,我们意识到了几个关键点:复用性:总结相关业务的共性,使得组合后的组件可以在任何类似的应用中使用公共逻辑灵活性:考虑到相关业务可能存在的异构性,将这些异构性设计为组件的可配置属性,使组件的适用性更高效:明确考虑将相关业务必要的重复逻辑封装到组件中,有效提高开发效率