基于Vue3实现动态表格的完整指南

<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>

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

<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)
})

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

<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>

<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>