fast-dataview-ui

Appearance

Return to top
On this page

ScrollRank 轮播排名表格

用于展示任务完成的百分比以及数值的排名。

基础用法

data属性为排名表格的数据，接受DataItem类型，pageSize每页大小，togglePage每次翻页切换多少条数据，maxValue最大值，如果不填，默认取data中的最大value，order排序模式

NO.1名称C
91.4%3200 / 3500
91.4%
NO.2名称N
51.4%1800 / 3500
51.4%
NO.3名称M
48.6%1700 / 3500
48.6%
NO.4名称I
42.9%1500 / 3500
42.9%
NO.5名称O
42.9%1500 / 3500
42.9%
<template>
  <FScrollRank :data="state.data" :pageSize="5" :togglePage="5" :maxValue="3500" order="reverse"></FScrollRank>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
let state = reactive({
  data:[
    {name:'名称A', value:200},
    {name:'名称B', value:1200},
    {name:'名称C', value:3200},
    {name:'名称D', value:100},
    {name:'名称E', value:400},
    {name:'名称F', value:300},
    {name:'名称G', value:1000},
    {name:'名称H', value:500},
    {name:'名称I', value:1500},
    {name:'名称J', value:900},
    {name:'名称K', value:800},
    {name:'名称L', value:700},
    {name:'名称M', value:1700},
    {name:'名称N', value:1800},
    {name:'名称O', value:1500},
  ]
})
</script>

格式化数值

valueFormatter进行数值格式化，接受一个函数，参数为name,value,maxValue,index

NO.1名称C
Infinity%3,200
Infinity%
NO.2名称J
Infinity%2,500
Infinity%
NO.3名称I
Infinity%1,500
Infinity%
NO.4名称B
Infinity%1,200
Infinity%
NO.5名称G
Infinity%1,000
Infinity%
<template>
  <FScrollRank :data="state.data" :pageSize="5" :togglePage="5" :valueFormatter="valueFormatter"></FScrollRank>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
let state = reactive({
  data:[
    {name:'名称A', value:200},
    {name:'名称B', value:1200},
    {name:'名称C', value:3200},
    {name:'名称D', value:100},
    {name:'名称E', value:400},
    {name:'名称F', value:300},
    {name:'名称G', value:1000},
    {name:'名称H', value:500},
    {name:'名称I', value:1500},
    {name:'名称J', value:2500},
  ]
})

const valueFormatter = ({name,value,maxValue,index})=>{
    let reverseNumber = (value + '').split('').reverse()
    if(reverseNumber.length <= 3){
     return value
    }
    let valueStr = ''
    while (reverseNumber.length) {
      const seg = reverseNumber.splice(0, 3).join('')
      valueStr += seg
      if (seg.length === 3) valueStr += ','
      }

    return valueStr.split('').reverse().join('')
  }
</script>

参数

参数名说明类型可选值默认值
data排名表格的数据DataItem[]-
pageSize每页的大小number-5
togglePage每次翻页多少条数据number-3
toggleDur翻页间隔(毫秒)number-3 * 1000
toggleDuration翻页动画的时长(毫秒)number-500
maxValue最大值，如果不设置，自动取data里的最大值number-
valueFormatter对data中的value数值格式化，参数name,value,
maxValue,index		Function-
order排列顺序（normal正序，reverse倒序,default不排序）stringdefault,reverse,normalreverse
showRank是否展示排名boolean-true
showPercent是否展示百分比boolean-true
showRatio是否比例boolean-true

DataItem属性

参数名说明类型可选值默认值
name用于展示的名称string,number-
value用于排名的数值number-