Datav的轮播表还是挺好用的,
下载datav:npm install @jiaminghi/data-view
main.js中引入:import dataV from ‘@jiaminghi/data-view’
Vue.use(dataV)
我做的是假数据展示,真实数据渲染的话可以参考别的大神写的文章。
<template>
<div>
<div style="position: relative;">
<dv-scroll-ranking-board
:config="configone"
style="width:98%;height:600px; margin: 0 auto;"
/>
</div>
</div>
</template>
主要就是配置config,header表头数据;data表数据;unit数值单位;rowNum表行数,默认展示5行。waitTime轮播时间间隔;
headerBGC 表头背景色;oddRowBGC 奇数行背景色;evenRowBGC 偶数行背景色;headerHeight 表头高度;align 列对齐方式;
index 是否显示行号
configone: {
header: ["h1", "h2", "h3"],
data: [
{
name: `
<div class="text_bl">xxx文字标题</div>
<div class="a1">
<div class="a2" style = "width: 100%;background: #dc4e41">
<div>100%</div>
<div class="a3">2020年</div>
</div>
</div>
`,
value: 100,
},
{
name: `
<div class="text_bl">xxx文字标题</div>
<div class="a1">
<div class="a2" style = "width: 100%;background: #dc4e41">
<div>100%</div>
<div class="a3">2020年</div>
</div>
</div>
`,
value: 100,
percent: 20,
},
{
name: `
<div> xxx文字标题 </div>
<div class="a1">
<div class="a2" style = "width: 5%;">
<div>5%</div>
<div class="a3">2019年</div>
</div>
<div class="a4" style = "width: 30%;">
<div>30%</div>
<div class="a9">2020年</div>
</div>
</div>
`,
value: 40,
},
],
unit: "%",
waitTime: 3000,
index: false,
align: ["left"],
headerHeight: 50,
headerBGC: "#010c5100",
oddRowBGC: "#061152",
evenRowBGC: "#010c5100",
rowNum: 6,
},
unit: "%",
};