使用vue实现表格

使用 Vue 实现表格

基础表格实现

在 Vue 中可以通过 v-for 指令动态渲染表格数据。以下是一个简单的表格示例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '城市'],
      rows: [
        { 姓名: '张三', 年龄: 25, 城市: '北京' },
        { 姓名: '李四', 年龄: 30, 城市: '上海' }
      ]
    }
  }
}
</script>

动态数据绑定

表格数据通常从 API 获取：

export default {
  data() {
    return {
      headers: [],
      rows: []
    }
  },
  async created() {
    const response = await fetch('/api/data')
    const data = await response.json()
    this.headers = data.headers
    this.rows = data.rows
  }
}

表格样式优化

添加 Bootstrap 或其他 UI 框架可以快速美化表格：

<template>
  <table class="table table-striped table-hover">
    <!-- 表格内容 -->
  </table>
</template>

排序功能实现

添加排序功能需要计算属性：

export default {
  data() {
    return {
      sortKey: '',
      sortOrder: 1 // 1=asc, -1=desc
    }
  },
  computed: {
    sortedRows() {
      return [...this.rows].sort((a, b) => {
        return a[this.sortKey] > b[this.sortKey] ? this.sortOrder : -this.sortOrder
      })
    }
  },
  methods: {
    sortBy(key) {
      this.sortOrder = this.sortKey === key ? -this.sortOrder : 1
      this.sortKey = key
    }
  }
}

分页功能

实现分页需要计算当前页数据：

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    paginatedRows() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.sortedRows.slice(start, start + this.pageSize)
    },
    totalPages() {
      return Math.ceil(this.rows.length / this.pageSize)
    }
  }
}

使用第三方组件

对于复杂表格，可以使用专业组件库：

• Element UI 的 el-table
• Vuetify 的 v-data-table
• PrimeVue 的 DataTable

以 Element UI 为例：

<template>
  <el-table :data="rows" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="city" label="城市"></el-table-column>
  </el-table>
</template>

响应式设计

针对移动端可以添加响应式处理：

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

性能优化

大数据量时考虑虚拟滚动：

// 使用vue-virtual-scroller等插件
import { RecycleScroller } from 'vue-virtual-scroller'