基于elementui的表格分页组件

二次封装CustomTable

CustomTable 是基于 elementui 将表格与分页封装一体的组件，支持正常使用 elemenui 表格中的属性与方法。减少开发者开发新增表格页面的重复性工作量，只需传入表格接口与相关配置即可使用。

一、开发

1.保留element组件属性

属性穿透

本次封装是对element的二次封装，除了需要封装的功能外，按照原则不改变element组件原本的属性如props,events,slots等。这时候可以使用attribute来实现属性的穿透。

  <el-table v-bind="$attrs">

监听事件穿透

同时可以通过v-on实现将使用二次封装组件时绑定的事件监听传给element组件

<el-table v-on="$listeners">

==*==不过值得注意的是：在vue3中$listeners已经被移除，该实现效果已经被划入$attar中。所以当项目支持vue3后，无需v-on="$listeners"

slot穿透

直接通过<slot></slot>将外界传入的自定义表格内容接收

2.调用逻辑

• 更改分页index/每页数据数量→重新调用请求接口（保留其他请求参数）→更新表格
• 更改请求参数→分页index重返第一页→重新调用请求接口→更新表格

使用该表格将无需每次开发新的表格页面都重新实现相关业务逻辑

二、使用说明

1.使用例子

<CustomTable
  ref="customTable"
  :api="'/api/crmemotion/customer-v2/customer-list.do'"
  :simpleMode="false"
  :ordered="true"
  :requestMethod="'post'"
  @dataUpdates="dataUpdates"
>
  <el-table-column
    prop="memberId"
    label="相亲ID"
    :min-width="TABLELINEWIDTH.ICONID"
    sortable
  >
    <template slot-scope="scope">
      <a
        href="javascript:void(0)"
        @click="
              common.openPage.customPage(
                '跟进客户',
                'followUpCustomer',
                scope.row.emotionId,
                {
                  memberId: scope.row.emotionId,
                  trueMemberId: scope.row.memberId,
                }
              )
            "
      >
        {{ scope.row.memberId !== -1 ? scope.row.memberId : '' }}
      </a>
    </template>
  </el-table-column>
</CustomTable>

通过$refs来获取customTable中的getListData请求函数，为方便对请求参数进行处理，直接在父页面中处理请求参数并在调用getListData时传入即可

this.$refs['customTable'].getListData(filterFormObj) //调用

2.属性

2.1.使用 elementui table 属性

基于 elementui 的 customtable 可以直接 elementui 对应的属性、事件、插槽特性等，无再次学习的成本。

2.2.请求接口

api和requestMethod、requestConfig属性发送请求。
listName为接口返回列表名，默认为list

• 目前requestMethod请求方式只支持get、post请求，同时当请求方式为 post 时组件内部会将请求格式通过qs.stringify()格式化，以支持情感 crm 的 post 请求参数格式。
• requestConfig用于设置 axios 请求头配置，传入格式例如：

 <CustomTable
      :requestConfig="{ 'Content-Type': 'multipart/form-data' }"
 />

• 请求参数直接在父组件调用处传入即可，如：

this.$refs['customTable'].getListData(filterFormObj)

• 表格内部配有 loading 属性。
• 成功请求后组件通过dataUpdates事件将返回数据data传给父组件

2.3.分页

simpleMode、countOption、pageCount设置分页组件属性。

• simpleMode代表分页是否为简单模式，默认值为否。
• countOption为页数展示数选择，仅在普通模式下生效。

2.4.表格配置

ordered设置表格是否有序号

三、总结

在首次尝试封装组件时，认识到几个关键点：

1. 可复用性：总结相关业务的共性，使组合的组件可以用在任何类似公共逻辑上
2. 灵活性：考虑到相关业务可能存在的异性，将这些异性设计为组件的可配置属性，使得组件的适用性更高
3. 高效性：将相关业务的必要重复逻辑考虑清楚封装进组件，有效提高开发效率