DataRank 排行榜

使用 avue-data-rank 展示排行榜，通过 option 提供配置和数据。

使用示例

效果预览可直接操作下方示例

先按业务排名排好 data，前三条自动显示奖牌。

正在加载示例…

<template>
  <div>
    <h3>销售排行榜</h3>
    <avue-data-rank :option="option1"></avue-data-rank>
    <h3 style="margin-top: 20px;">积分排行榜</h3>
    <avue-data-rank :option="option2"></avue-data-rank>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const option1 = ref({
  title: '本月销售TOP5',
  unit: '万元',
  data: [
    { name: '张三', value: 980, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', desc: '销售一部' },
    { name: '李四', value: 870, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', desc: '销售二部' },
    { name: '王五', value: 760, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', desc: '销售一部' },
    { name: '赵六', value: 650, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', desc: '销售三部' },
    { name: '孙七', value: 540, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', desc: '销售二部' }
  ]
});
const option2 = ref({
  title: '用户积分榜',
  unit: '分',
  barColor: '#67c23a',
  data: [
    { name: '用户A', value: 15800 },
    { name: '用户B', value: 12300 },
    { name: '用户C', value: 9800 },
    { name: '用户D', value: 7600 },
    { name: '用户E', value: 5400 }
  ]
});
</script>

Props

参数	类型	默认值	说明
option	object	{}	组件配置；不使用 option 外的独立 data 属性

option 配置

字段	类型	默认值	说明
data	array	[]	按排名顺序提供数据
title	string	—	列表标题
animation	boolean	true	是否启用数值动画
unit	string	''	默认单位，可被 item.unit 覆盖
showBar	boolean	true	显示数值占比进度条
barColor	string	#409eff	默认进度条颜色

data 数据项

字段	类型	默认值	说明
name / desc	string	—	名称及描述
avatar	string	—	头像地址
value	number	—	排名数值
decimals	number	0	小数位数
unit / color	string	继承 option	单项单位 / 进度条颜色
click	function	—	点击回调 click(item)

使用说明

组件不排序，直接按数组顺序编号，前三项显示奖牌。进度按 value / 最大 value 计算；存在负数或全部为 0 时，请设 showBar: false，避免无效百分比。

事件与回调

组件没有通过 $emit 定义业务事件。data[i].click(item) 是配置回调，接收原始数据项；它不是组件 @click 的数据事件。这些卡片不处理 href，跳转逻辑应写在 click 回调中。

插槽与方法

当前组件未定义内容插槽。

不需要通过 ref 调用内部渲染方法；更新 option 或 option.data 即可刷新内容。