tabla de carrusel de datos

 

<template>
  <div>
    <dv-scroll-board :config="config" style="margin-left:1rem;width:95%;height:48rem" />
  </div>
</template>

 

<script>
export default {
  props:['AreaData'],
  data(){
    return {
      config:{
        header: ['地区编码','地区名称','订单数量'],
        indexHeader:'序号',
        rowNum: 23, // 表行数
        headerBGC: '#eb5a6d', // 表头背景色
        oddRowBGC: '#FFF', // 奇数行背景色
        evenRowBGC: '#f5f5f5', // 偶数行背景色
        waitTime: 2000, // 轮播时间间隔(ms)
        align: ['center'],
        data: []
      }
    }
  },
  watch:{
    AreaData(val){
      console.log(val)
      let arr = []
      if(val.length >0){
        for(let i in val){
          let code = val[i].area
          let name = val[i].name
          let num = val[i].num
          arr.push([code,name, `<div style="background:#67e0e3; white-space:nowrap; width:${num/1000}px !important">${num}</div>`])
        }
        let nowData = this.config
        nowData.data = arr
        this.config = {...nowData}
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .dv-scroll-board{
    color:#333;
    /deep/ .header-item{
      font-size: 1em;
      text-align: center;
      white-space: nowrap;
      color:#FFF !important;
    }
    .rows{
      .row-item{
        text-align: center;
        line-height: 2rem;
        .ceil{
          color:#3c3f52;
          font-size: 1em;
          i{
            font-size: 0.5em;
          }
        }
        .ceil:nth-child(2){
          color: #eb5a6d !important;
          font-size: 1.1em;
          width: 25%;
        }
      }
    }
  }
  .test{
    width: 10px;
    background-size: 10% 10%;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
     background: #eb5a6d;
  }
</style>