基于Vue3實現(xiàn)動態(tài)表格的完整指南

更新時間：2026年05月29日 09:23:10 作者：幸運小圣

動態(tài)表格是一種在運行時可生成或修改的表格,持排序、篩選、分頁和編輯等復(fù)雜交互,下面我們就來看看如何在Vue3中具體實現(xiàn)動態(tài)表格的完整步驟吧

什么是動態(tài)表格

動態(tài)表格（Dynamic Table）是指：

表格結(jié)構(gòu)和內(nèi)容在運行時可以動態(tài)生成或修改。
表頭和數(shù)據(jù)行不固定，可根據(jù)后端接口或前端邏輯生成。
支持排序、篩選、分頁、可編輯、操作按鈕等復(fù)雜交互。

區(qū)別于靜態(tài)表格：靜態(tài)表格表頭固定，無法靈活應(yīng)對動態(tài)數(shù)據(jù)。

使用場景

管理后臺數(shù)據(jù)列表（用戶管理、訂單管理）
數(shù)據(jù)報表系統(tǒng)
可編輯的數(shù)據(jù)錄入表格
數(shù)據(jù)對比與分析平臺

基礎(chǔ)實現(xiàn)方式

HTML + Vue 3

代碼展示：

最基礎(chǔ)的動態(tài)表格實現(xiàn)方式是利用 Vue 3 的 v-for 渲染表頭和內(nèi)容：

<template>
  <table border="1">
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">
          {{ column.label }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in tableData" :key="row.id">
        <td v-for="column in columns" :key="column.key">
          {{ row[column.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script setup>
import { ref } from 'vue'
const columns = ref([
  { key: 'id', label: 'ID' },
  { key: 'name', label: '姓名' },
  { key: 'age', label: '年齡' }
])
const tableData = ref([
  { id: 1, name: '張三', age: 18 },
  { id: 2, name: '李四', age: 22 },
  { id: 3, name: '王五', age: 20 }
])
</script>

特點：

表頭和內(nèi)容完全動態(tài)生成
可配合后端 API 動態(tài)加載數(shù)據(jù)（響應(yīng)式數(shù)據(jù)綁定）

動態(tài)表格常用功能

排序

可以使用數(shù)組的 sort 或第三方庫提供的排序功能：

<th @click="sort('age')">年齡</th>
<script setup>
const sort = (key) => {
  tableData.value.sort((a, b) => a[key] - b[key])
}
</script>

篩選

使用 computed 來過濾數(shù)據(jù)：

<input v-model="searchName" placeholder="搜索姓名" />
<tr v-for="row in filteredData" :key="row.id">
  ...
</tr>
<script setup>
import { ref, computed } from 'vue'
const searchName = ref('')
const filteredData = computed(() =>
  tableData.value.filter(row => row.name.includes(searchName.value))
)
</script>

分頁

簡單的分頁邏輯：

const currentPage = ref(1)
const pageSize = ref(5)

const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return tableData.value.slice(start, start + pageSize.value)
})

可編輯單元格

結(jié)合 v-model 實現(xiàn)單元格編輯：

<td v-for="column in columns" :key="column.key">
  <input v-model="row[column.key]" />
</td>

使用第三方庫實現(xiàn)動態(tài)表格

Element Plus

<template>
  <el-input v-model="searchName" placeholder="搜索姓名" style="margin-bottom: 10px;" />
  <el-table :data="filteredData" style="width: 100%">
    <el-table-column prop="id" label="ID" sortable></el-table-column>
    <el-table-column prop="name" label="姓名" sortable>
      <template #default="{ row }">
        <el-input v-model="row.name"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年齡" sortable></el-table-column>
    <el-table-column prop="email" label="郵箱"></el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    :page-size="pageSize"
    :total="tableData.length"
    style="margin-top: 10px;"
  ></el-pagination>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
const tableData = ref([])
const searchName = ref('')
const currentPage = ref(1)
const pageSize = ref(5)
onMounted(async () => {
  const res = await axios.get('/api/users')
  tableData.value = res.data
})
const filteredData = computed(() => {
  const filtered = tableData.value.filter(row => row.name.includes(searchName.value))
  const start = (currentPage.value - 1) * pageSize.value
  return filtered.slice(start, start + pageSize.value)
})
</script>

Naive UI

<template>
  <n-data-table
    :columns="columns"
    :data="tableData"
    :bordered="true"
  />
</template>
<script setup>
import { ref, h } from 'vue'
import { NButton } from 'naive-ui'
const columns = [
  { title: 'ID', key: 'id' },
  { title: '姓名', key: 'name' },
  { title: '年齡', key: 'age' },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(NButton, { type: 'primary', size: 'small', onClick: () => alert('編輯: ' + row.name) }, { default: () => '編輯' })
    }
  }
]
const tableData = ref([
  { id: 1, name: '張三', age: 18 },
  { id: 2, name: '李四', age: 22 }
])
</script>

特點：