共计 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. 申请接口
通过 api
和requestMethod
、requestConfig
属性发送申请。listName
为接口返回列表名,默认为list
- 目前
requestMethod
申请形式只反对get
、post
申请,同时当申请形式为 post 时组件外部会将申请格局通过qs.stringify()
格式化,以反对情感 crm 的 post 申请参数格局。 -
requestConfig
用于设置 axios 申请头配置,传入格局例如:<CustomTable :requestConfig="{'Content-Type':'multipart/form-data'}" />
- 表格外部配有 loading 属性。
- 胜利申请后组件通过
dataUpdates
事件将返回数据data
传给父组件
2.3. 分页
通过 simpleMode
、countOption
、pageCount
设置分页组件属性。
simpleMode
代表分页是否为简略模式,默认值为否。
简略模式
一般模式countOption
为页数展现数抉择,仅在一般模式下失效。
正文完
发表至: element-ui
2022-12-27