如果你的空间比较局限,不自定义样式是这样的,可能会展示不全
直接上代码吧。。。
1.首先安装dataV
npm install @jiaminghi/data-view
2.在main.js里注册,也可以去官网找按需引入
import dataV from "@jiaminghi/data-view";
Vue.use(dataV);
3.使用
<dv-scroll-board
:config="config"
ref="scrollBoard"
style="width: 100%; height: 98%"
@click="skipto"
/>
config: {
rowNum: 4,//显示行数
header: ["报警时间", "联网单位", "设备名称", "操作"],//表头
headerBGC: "#1a264a",//表头背景色
oddRowBGC: "#18222e",//奇数行背景色
evenRowBGC: "#18222e",//偶数行背景色
data: [],//存放数据
},
data.list.forEach((item, index) => {
if (index % 2 == 0) {
this.config.data.push([
`<div style="color:red;line-height:14px;text-align: center;margin-top:5px">${item.reportTime.slice(
0,
11
)}<br/>${item.reportTime.slice(11)}</div>`,
// item.reportTime,
item.orgName,
item.deviceName,
`<span style="cursor: pointer;">查看</span>`,
]);
} else {
this.config.data.push([
`<div style="color:orange;line-height:14px;text-align: center;margin-top:5px">${item.reportTime.slice(
0,
11
)}<br/>${item.reportTime.slice(11)}</div>`,
// item.reportTime,
item.orgName,
item.deviceName,
`<span style="cursor: pointer;">查看</span>`,
]);
}
});
最最最重要!!!必须有这行,要不然你的轮播表不动
this.$refs["scrollBoard"].updateRows(this.config.data);
展示
如果需要点击事件 ,则需要精准的找到你定义的那段
skipto(config) {
if (config.ceil == `<span style="cursor: pointer;">查看</span>`) {
this.$router.push({
path: "monitoring/fire",
query: {
id: this.alarmList[config.rowIndex].alarmId,
deviceId: this.alarmList[config.rowIndex].deviceId,
},
});
}
},