1、npm安装 npm install @jiaminghi/data-view
2、main.js引入
import DataV from ‘@jiaminghi/data-view’
Vue.use(DataV)
<dv-scroll-board :config="config" @click="boardClick" style="width: 100%; height: 200px" />
<script>
export default {
data() {
return {
config: {
indexHeader: "序号",
oddRowBGC: "green", // 奇数行背景色
evenRowBGC: "#000", // 偶数行背景色
headerBGC: "#eb5a6d", // 表头背景色
header: ["各省名称", "活动内容"],
rowNum: 5, // 表行数
headerHeight: 50,
columnWidth: [280],
waitTime: 1500, // 轮播时间间隔(ms)
align: ["center", "center"],
data: [
["<span style='cursor:pointer'>上海市</span>", 1111],
["<span style='cursor:pointer'>北京市</span>", "伟大的劳动人民"],
["<span style='cursor:pointer'>广西壮族自治区</span>", 9098],
["<span style='cursor:pointer'>广东省</span>", 8909099],
[
"<span style='cursor:pointer'>东北三省</span>",
"<span style='color:yellow'>吉林省、黑龙江省、辽宁省</span>",
],
["<span style='cursor:pointer'>省略...</span>", "有很多活动写不完"],
],
},
};
},
methods: {
boardClick(rows) {
console.log(rows);
},
},
};
</script>
官网:DataV