1、npm安装 npm install @jiaminghi/data-view
2、main.js引入
import DataV from ‘@jiaminghi/data-view’
Vue.use(DataV)
3、页面中的使用该插件
<dv-scroll-board :config="scrollData2" v-if="ssyjShow"/>
config是配置属性绑定的值scrollData2在data里声明如下
scrollData2: {
headerBGC: "#f2f1f1",
oddRowBGC: "",
evenRowBGC: "",
headerHeight: 34,
align: ["center", "center", "center", "center"],
rowNum: 8,
columnWidth:[120,90],
header: [
'<span style="font-size:14px;color:#000000;">风险类型</span>',
'<span style="font-size:14px;color:#000000;">相关用户</span>',
'<span style="font-size:14px;color:#000000;">触发时间</span>',
],
data: [],
},
ssyjShow:false
循环的列表部分数据处理如下:
getToday().then(res =>{
this.today = res.data.data
let arr = []
const alist = res.data.data
for(let i=0;i<alist.length;i++){
let blist = [
`<span style="font-size:14px;color:#000000;width:130px;">${alist[i].riskType}</span>`,
`<span style="font-size:14px;color:#000000;width:100px;">${alist[i].account}</span>`,
`<span style="font-size:14px;color:#000000;width:140px;">${alist[i].triggerTime}</span>`,
]
arr.push(blist)
}
this.scrollData2.data = arr
this.ssyjShow = true
})
最后附上我的代码截图