# 页面组件：排行榜

来源快照：`result_data_new_260518.json`

- 来源 ID：`1967652494187570992`
- 模块：低代码平台e-builder
- 目录：专题学习 - 功能点专题 - 页面图表
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**  
**

**1.场景说明**

选择不同的数据源，展示不同维度的排行数据,如：以律师名称为排行对象、以综合能力、业务能力等数据来作为排行数据

效果展示：

   ![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709761978589195&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**2\. 功能简介**

上述场景可以使用页面设计中的排行榜组件来实现，排行榜组件具有以下四个特点：

1、内容来源支持：数据源、手动添加两种方式

2、排行数据条数默认为10，可自由调整

3、内容来源为数据源时可对数据设置条件；

4、点赞功能，点赞功能开启后用户进行点赞，点赞后也可取消点赞；

  


**3\. 操作说明**  


****

内容来源为数据源

1、选中数据展示类组件排行榜，拖拽到页面编辑器中，选择内容来源为数据源，添加排行对象、排行数据

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709761978589229&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)**  
**  


  


2、设置显示条数、条件并开启点赞

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709770486579208&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


3：排行榜组件样式默认为勋章列表，可以点击组件更换为其他样式

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709774697660420&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


内容来源为手动添加

1、选中数据展示类组件排行榜，拖拽到页面编辑器中，选择内容来源为手动添加并点击数据设置

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709774736924689&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


2、鼠标右击可进行插入行、移除行、复制、剪切等操作

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709774829936663&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


3、数据根据列表顺序进行排行

  


  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709779194839068&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


4、开启点赞，更换排行榜组件样式

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709783386316812&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
