Vue.js 中表格展示数据时出现滚动条影响美观的问题解决方案

Vue.js 中解决表格滚动条影响美观的问题

在前端开发中，经常需要展示大量数据，而表格是一个很好的展示方式。但是，当表格数据过多时，会出现滚动条，影响用户的使用体验，甚至破坏整个页面的美观性。在 Vue.js 中，我们可以采取一些措施来解决这个问题。

解决方案

1. 固定表头

当数据量较大时，滚动表格中头部固定，这样可以在用户滚动表格时保留表头在页面上的显示。我们可以通过 CSS 将表头固定，代码如下：

// www.javascriptcn.com code example
.table {
  table-layout: fixed;
}

.table thead tr {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
}

通过 position:sticky 可以让表头始终保持在页面顶部。同时，为了解决表格固定后造成的样式混乱问题，我们还需要将表格的 table-layout 属性设置为 fixed。

2. 懒加载

如果数据量非常大，单纯的固定表头并不足以解决问题，我们可以采用分页加载的方式，在需要时异步加载数据，避免一次性加载大量数据，导致页面渲染缓慢，影响用户体验。在 Vue.js 中，我们可以使用第三方库 vue-infinite-loading，该库提供了无限滚动的组件，实现懒加载，代码如下：

// www.javascriptcn.com code example
<infinite-loading @infinite="infiniteHandler">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.gender}}</td>
      </tr>
    </tbody>
  </table>
</infinite-loading>

// www.javascriptcn.com code example
import InfiniteLoading from 'vue-infinite-loading'

export default {
  components: {
    InfiniteLoading
  },
  data () {
    return {
      items: []
    }
  },
  methods: {
    infiniteHandler ($state) {
      setTimeout(() => {
        const newItems = fetchData()
        if (newItems.length > 0) {
          this.items.push(...newItems)
          $state.loaded()
        } else {
          $state.complete()
        }
      }, 1000)
    }
  }
}

上述代码中，通过 vue-infinite-loading 实现了无限滚动加载的效果。当用户滚动到表格底部时，触发 infiniteHandler 函数，实现异步分页加载数据。

示例代码

下面提供一个完整的 Vue.js 实现表格懒加载和固定表头效果的示例代码：

// www.javascriptcn.com code example
<template>
  <div>
    <h1>员工信息</h1>
    <div class="table-wrapper">
      <table class="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in items" :key="item.id">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.gender}}</td>
          </tr>
        </tbody>
      </table>
      <infinite-loading @infinite="infiniteHandler"></infinite-loading>
    </div>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'

export default {
  components: {
    InfiniteLoading
  },
  data () {
    return {
      items: []
    }
  },
  methods: {
    fetchData () {
      // 模拟异步请求数据
      const data = []
      for (let i = 0; i < 20; i++) {
        data.push({
          id: Date.now() + i,
          name: `张三${i}`,
          age: 18 + i,
          gender: i % 2 === 0 ? '男' : '女'
        })
      }
      return data
    },
    infiniteHandler ($state) {
      setTimeout(() => {
        const newItems = this.fetchData()
        if (newItems.length > 0) {
          this.items.push(...newItems)
          $state.loaded()
        } else {
          $state.complete()
        }
      }, 1000)
    }
  }
}
</script>

<style>
.table-wrapper {
  width: 100%;
  max-height: 400px;
  overflow: auto;
}

.table {
  width: 100%;
  table-layout: fixed;
}

.table thead tr {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
}
</style>

在上述示例代码中，我们通过 vue-infinite-loading 实现了表格的懒加载效果，通过 CSS 解决了表格滚动条的美观性问题。这种方式既提高了用户体验，又保证了整个页面的美观性。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cd2912e46428fe9e68d95c