自定义表格
<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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?