Q-Ranking 排名轮播表

排名轮播表同轮播表类似，也可以选择单条轮播或整页轮播。 参考 dataV-排名轮播表 (opens new window)

<QRanking :config="config" :data="data" style="width:400px;height:200px;"></QRanking>

基本示例

<template>
  <div style="background: black;height: 300px" class="flex-center-cus">
    <QRanking :config="config" :data="data" style="width:400px;height:200px;" :isFormatter="true"></QRanking>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {},
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 1200
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ]
      }
    },
  }
</script>
<style>

</style>

Expand Copy Copy

进阶示例

<template>
  <div style="background: black;height: 300px" class="flex-center-cus">
    <QRanking :config="config" :data="data" style="width:400px;height:200px;"></QRanking>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          carousel: 'page',
          unit: '单位',
        },
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 1200
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ]
      }
    },
  }
</script>
<style>

</style>

Expand Copy Copy

Attributes

config 属性

属性名	说明	类型	可选值	默认值
data(对应:data)	表数据	Array<Object>	data 属性	[]
rowNum	表行数	Number	—	5
waitTime	轮播时间间隔(ms)	Number	—	2000
carousel	轮播方式	String	'single'/'page'	'single'
unit	数值单位	String	—	''
sort	自动排序	Boolean	—	true
formatter	数值格式化	Function	—	千位格式化

data 属性

属性名	说明	类型	可选值	默认值
name	名称	String	—	—
value	数值	Number	—	—

formatter 参数属性

属性名	说明	类型	可选值	默认值
name	名称	String	—	—
value	数值	Number	—	—
percent	百分比	Number	—	—
ranking	排名	Number	—	—