Vue基于DataV优化样式滚动表格(dv-scroll-board)

最新推荐文章于 2025-06-18 18:01:06 发布

原创

最新推荐文章于 2025-06-18 18:01:06 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #npm

本文介绍了如何在Vue项目中使用DataV库优化表格样式，实现流畅的滚动效果。通过展示实际效果和提供相关代码，帮助开发者理解并应用这一优化技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

代码

<template>
  <div>
    <dv-scroll-board :config="config" style="width: 800px; height: 220px" />
  </div>
</template>

<script>
export default {
  /**
   * header = [{value:label}]
   * data = [{对象}]
   */
  props: ['data', 'header'],
  data() {
    return {
      config: {
        header: [],
        data: [],
        index: true,
        columnWidth: [200, 600, 700, 500],
        align: ['center'],
        rowNum: 10,
        headerHeight: 40,
        headerBGC: '#fff',
        oddRowBGC: '#FFF',
        evenRowBGC: '#FFF'
      }
    }
  },
  created() {
    var header = []
    var clearHeader = []
    this.header.map(val => {
      clearHeader.push(val.label)
      header.push('<span class="roll-table-header">' + val.value + '</span>')
    })
    this.confi