自定义表格

复制代码
<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>
复制代码

 

posted @   ladybug7  阅读(10)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示