DataV中的轮播表 -- 自定义样式

• 最近大屏项目中，使用 DataV中的轮播表，样式需要做相关调整，总结一波！

基本轮播表

<dv-scroll-board :config="config" style="width:500px;height:220px"/>// config如下exportdefault{header:['列1','列2','列3'],data:[['行1列1','行1列2','行1列3'],['行2列1','行2列2','行2列3'],['行3列1','行3列2','行3列3'],['行4列1','行4列2','行4列3'],['行5列1','行5列2','行5列3'],['行6列1','行6列2','行6列3'],['行7列1','行7列2','行7列3'],['行8列1','行8列2','行8列3'],['行9列1','行9列2','行9列3'],['行10列1','行10列2','行10列3']],index:true,columnWidth:[50],align:['center']}

自定义样式

<template><div class="scrollboard"><dv-scroll-board :config="config"/></div></template><script>exportdefault{props:{// 表头名称titles:{type: Array,default:()=>[],},// 单位units:{type: Array,default:()=>[],},// 具体数值list:{type: Array,default:()=>[['xx','44108','46694','-0.5','-5.64','-23.89'],['xx','27089','25173','35.32','7.61','-22.73'],['xxx','27624','28683','15.90','-3.69','-23.87'],['xx','8091','9830','-5.20','-17.69','-30.44'],['xx','0','0','NaN','-','-'],['xx','0','0','NaN','-','-'],],},defaultConfig:{type: Object,default:()=>({// index: true,columnWidth:[80,80,80],align:['center','center','center','center','center'],}),},},computed:{// 应用---表头newHeader(){returnthis.titles.map((item, index)=>'<span>'+ item +'</span><span>'+this.units[index]+'</span>')},// 应用---表格内容newList(){let aa =this.list.reduce((acc, item)=>{
        acc.push(item.slice(-3))return acc
      },[])let bb = aa.map((item)=>{let arr =[]for(let val of item){let str =''if(Number(val)>0){
            str ='<span>'+ val +'<i class="iconfont up icon-jiantou_xiangshang" style="color: rgb(39, 174, 78)"></i></span>'}elseif(Number(val)<0){
            str ='<span>'+ val +'<i class="iconfont icon-jiantou_xiangxia" style="color: rgb(242, 166, 1);"></i></span>'}else{
            str = val
          }
          arr.push(str)}return arr
      })let cc =this.list.map((item, index)=>[...item.slice(0,3),...bb[index],])return cc
    },config(){return Object.assign({},this.defaultConfig,{header:this.newHeader },{data:this.newList })},},}</script><style lang="scss" scoped>.scrollboard {height:100%;}// 表头--整体设置::v-deep .header {
  align-items: center;}// 表头元素设置::v-deep .header-item {
  font-size:vw(10)!important;height: auto !important;padding:0;
  line-height:vw(25)!important;display: flex;
  flex-direction: column;
  align-items: center;}// 表格内容--行元素设置::v-deep .dv-scroll-board .rows .row-item {
  font-size:vw(10)!important;
  text-align: center !important;}</style>