当前位置：首页 > VUE

vue 实现页面表格

2026-01-17 16:07:02VUE

Vue 实现页面表格的方法

Vue 提供了多种方式实现表格功能，可以根据需求选择不同的方案。以下是常见的实现方法：

使用原生 HTML 表格

通过 Vue 的模板语法直接渲染表格数据：

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

<script>
export default {
  data() {
    return {
      headers: ['ID', 'Name', 'Age'],
      rows: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 }
      ]
    }
  }
}
</script>

使用第三方表格组件库

Element UI 的表格组件示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'John',
        address: 'New York'
      }, {
        date: '2016-05-04',
        name: 'Jane',
        address: 'London'
      }]
    }
  }
}
</script>

实现表格分页功能

结合分页组件实现数据分页：

<template>
  <div>
    <table>
      <!-- 表格内容 -->
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
      <span>Page {{ currentPage }} of {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 100
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    }
  }
}
</script>

表格排序功能实现

为表格添加排序功能：

<template>
  <table>
    <thead>
      <tr>
        <th @click="sortBy('name')">Name</th>
        <th @click="sortBy('age')">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in sortedRows" :key="row.id">
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 }
      ],
      sortKey: '',
      sortDirection: 1
    }
  },
  computed: {
    sortedRows() {
      if (!this.sortKey) return this.rows
      return [...this.rows].sort((a, b) => {
        return (a[this.sortKey] > b[this.sortKey] ? 1 : -1) * this.sortDirection
      })
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortDirection *= -1
      } else {
        this.sortKey = key
        this.sortDirection = 1
      }
    }
  }
}
</script>

表格筛选功能

添加搜索框实现表格筛选：

<template>
  <div>
    <input v-model="searchText" placeholder="Search...">
    <table>
      <tbody>
        <tr v-for="row in filteredRows" :key="row.id">
          <td>{{ row.name }}</td>
          <td>{{ row.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      rows: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 }
      ]
    }
  },
  computed: {
    filteredRows() {
      return this.rows.filter(row => 
        row.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
        row.age.toString().includes(this.searchText)
      )
    }
  }
}
</script>

响应式表格设计

使用 CSS 实现响应式表格：

<template>
  <div class="table-responsive">
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
</template>

<style>
.table-responsive {
  overflow-x: auto;
}

@media (max-width: 600px) {
  table {
    display: block;
  }
  th, td {
    display: block;
    width: 100%;
  }
}
</style>

以上方法可以根据实际项目需求组合使用，构建功能完善的表格组件。

vue 实现页面表格