当前位置：首页 > VUE

vue移动端实现表格

2026-01-22 20:37:56VUE

Vue移动端表格实现方案

移动端表格需要考虑小屏幕适配、触摸操作和性能优化，以下是几种常见实现方式：

使用Vant组件库

安装Vant：

vue移动端实现表格

npm install vant

基础表格实现：

<template>
  <van-cell-group>
    <van-cell v-for="item in list" :key="item.id" :title="item.name" :value="item.value" />
  </van-cell-group>
</template>

<script>
import { Cell, CellGroup } from 'vant';
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      list: [
        { id: 1, name: '项目1', value: '100' },
        { id: 2, name: '项目2', value: '200' }
      ]
    }
  }
}
</script>

自定义响应式表格

使用CSS实现响应式布局：

vue移动端实现表格

<template>
  <div class="mobile-table">
    <div class="table-header">
      <div v-for="col in columns" :key="col.key">{{ col.title }}</div>
    </div>
    <div class="table-body">
      <div v-for="row in data" :key="row.id" class="table-row">
        <div v-for="col in columns" :key="col.key" :class="['cell', col.key]">
          {{ row[col.key] }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.mobile-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-header, .table-row {
  display: flex;
  min-width: 600px;
}

.table-header > div, .table-row > div {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
}

.table-header {
  font-weight: bold;
  background: #f5f5f5;
}
</style>

虚拟滚动优化

对于大数据量表格，建议使用虚拟滚动：

<template>
  <virtual-list
    :size="50"
    :remain="8"
    :data="bigData"
  >
    <template v-slot="{ item }">
      <div class="row">
        <span class="cell">{{ item.name }}</span>
        <span class="cell">{{ item.age }}</span>
      </div>
    </template>
  </virtual-list>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list';
export default {
  components: { VirtualList },
  data() {
    return {
      bigData: Array(1000).fill().map((_, i) => ({
        id: i,
        name: `用户${i}`,
        age: Math.floor(Math.random() * 50) + 18
      }))
    }
  }
}
</script>

横向滑动表格

实现可横向滚动的表格：

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      <table>
        <thead>
          <tr>
            <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in data" :key="row.id">
            <td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.scroll-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scroll-content {
  min-width: 800px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}
</style>