自定義表格

<template>
  <div class="ting-scroll">
    <dv-scroll-board :config="config" style="height:370px;" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      config: {
        headerBGC: '#06405E',
        index: true,
        align: ['center', 'center', 'center'],
        columnWidth: [50],
        rowNum: 8,
        header: ['樓宇', '狀態', '控制連結'],
        data: [
          ['教學樓', '正常', 'sn-4586622'],
          ['教學樓', '<span style="color:#F45A23">維修</span>', 'sn-4586622'],
          ['教學樓', '正常', 'sn-4586622'],
          ['教學樓', '正常', 'sn-4586622'],
          ['教學樓', '<span style="color:#F45A23">維修</span>', 'sn-4586622'],
          ['教學樓', '正常', 'sn-4586622'],
          ['教學樓', '正常', 'sn-4586622'],
          ['教學樓', '<span style="color:#F45A23">維修</span>', 'sn-4586622'],
          ['教學樓', '正常', 'sn-4586622'],
          ['教學樓', '正常', 'sn-4586622'],
        ]
      }
    }
  },
  created() {
    // this.formatData()
  },
  mounted() {
    // this.formatData()
  },
  methods: {
    formatData() {
      const { colorList } = this;
      const list = []
      for (let i = 0; i < 10; i++) {
        let item = `
          <div class="ting-item-wrapper">
            <div class="ting-item">
              <span class="ting-item-index">${i + 1}</span>
              <span class="ting-item-label">xx資產</span>
              <div class="ting-item-bar-wrapper">
                <div class="ting-item-bar" style="background: ${colorList[i] && colorList[i].barBg || 'red'}; right: 10%"></div>
              </div>
              <div class="ting-item-right">
                <span class="ting-item-value" style="color: ${colorList[i] && colorList[i].valueColor || 'pink'}">100</span>
                <span class="ting-item-unit">萬</span>
              </div>
            </div>
          </div>
        `
        list.push([item]);
      }
      this.config = {
        oddRowBGC: 'transparent',
        evenRowBGC: 'transparent',
        rowNum: 2,
        waitTime: 3000,
        data: list
      }
    }
  }
}
</script>

<style>
  .ting-scroll {
    overflow: hidden;
  }
</style>