关于element-ui:封装-基于elementui的表格分页组件

38次阅读

共计 1168 个字符,预计需要花费 3 分钟才能阅读完成。

CustomTable

CustomTable 是基于 elementui 将表格与分页封装一体的组件,反对失常应用 elemenui 表格中的属性与办法。

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
            class="za-tx"
            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>

2. 属性

2.1. 应用 elementui table 属性

基于 elementui 的 customtable 能够间接失常 elementui 对应的属性、事件、插槽个性等,无再次学习的老本。

2.2. 申请接口

通过 apirequestMethodrequestConfig属性发送申请。
listName为接口返回列表名,默认为list

  • 目前 requestMethod 申请形式只反对 getpost 申请,同时当申请形式为 post 时组件外部会将申请格局通过 qs.stringify() 格式化,以反对情感 crm 的 post 申请参数格局。
  • requestConfig用于设置 axios 申请头配置,传入格局例如:

     <CustomTable
        :requestConfig="{'Content-Type':'multipart/form-data'}"
     />
  • 表格外部配有 loading 属性。
  • 胜利申请后组件通过 dataUpdates 事件将返回数据 data 传给父组件

2.3. 分页

通过 simpleModecountOptionpageCount 设置分页组件属性。

  • simpleMode代表分页是否为简略模式,默认值为否。
    简略模式
    一般模式
  • countOption为页数展现数抉择,仅在一般模式下失效。

正文完
 0