当前位置：首页 > VUE

vue实现表格组件

2026-02-18 18:06:30VUE

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 data" :key="index">
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

可排序表格

通过添加排序方法实现点击表头排序功能。在表头添加点击事件，根据当前排序状态切换升序或降序。

vue实现表格组件

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" 
            :key="header.key"
            @click="sortTable(header.key)">
          {{ header.text }}
          <span v-if="sortKey === header.key">
            {{ sortOrder === 1 ? '↑' : '↓' }}
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in sortedData" :key="index">
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      sortKey: '',
      sortOrder: 1, // 1升序，-1降序
      headers: [
        { text: '姓名', key: 'name' },
        { text: '年龄', key: 'age' }
      ],
      data: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ]
    }
  },
  computed: {
    sortedData() {
      if (!this.sortKey) return this.data
      return [...this.data].sort((a, b) => {
        return (a[this.sortKey] > b[this.sortKey] ? 1 : -1) * this.sortOrder
      })
    }
  },
  methods: {
    sortTable(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1
      } else {
        this.sortKey = key
        this.sortOrder = 1
      }
    }
  }
}
</script>

分页功能

添加分页功能需要计算当前页显示的数据。使用计算属性根据当前页码和每页显示数量切片数据数组。

<template>
  <div>
    <table>
      <!-- 表格内容同上 -->
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage >= pageCount">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      // 其他数据同上
    }
  },
  computed: {
    pageCount() {
      return Math.ceil(this.data.length / this.pageSize)
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.sortedData.slice(start, end)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.pageCount) this.currentPage++
    }
  }
}
</script>

可编辑表格

vue实现表格组件

实现单元格编辑功能需要跟踪编辑状态。通过双击单元格进入编辑模式，绑定输入框实现数据修改。

<template>
  <table>
    <tbody>
      <tr v-for="(row, rowIndex) in data" :key="rowIndex">
        <td v-for="(value, key) in row" 
            :key="key"
            @dblclick="editCell(rowIndex, key)">
          <template v-if="editing.row === rowIndex && editing.col === key">
            <input v-model="row[key]" 
                   @blur="saveEdit"
                   @keyup.enter="saveEdit"/>
          </template>
          <template v-else>
            {{ value }}
          </template>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      editing: { row: null, col: null },
      // 其他数据同上
    }
  },
  methods: {
    editCell(row, col) {
      this.editing = { row, col }
    },
    saveEdit() {
      this.editing = { row: null, col: null }
    }
  }
}
</script>

高级表格组件

对于复杂需求，可以考虑使用现成的表格组件库：