当前位置：首页 > VUE

vue实现表格更新

2026-02-18 21:57:38VUE

Vue 实现表格更新的方法

数据驱动更新

在 Vue 中，表格数据通常存储在组件的 data 或 computed 属性中。当数据发生变化时，Vue 会自动更新 DOM。

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
  <button @click="updateData">更新数据</button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 }
      ]
    }
  },
  methods: {
    updateData() {
      this.tableData = [
        { name: '王五', age: 30 },
        { name: '赵六', age: 35 }
      ]
    }
  }
}
</script>

动态添加行

可以通过数组的 push 方法向表格添加新行。

methods: {
  addRow() {
    this.tableData.push({ name: '新用户', age: 0 })
  }
}

删除行

使用数组的 splice 方法删除指定行。

methods: {
  deleteRow(index) {
    this.tableData.splice(index, 1)
  }
}

编辑单元格

可以通过 v-model 实现双向绑定来编辑单元格内容。

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td><input v-model="item.name"></td>
      <td><input v-model="item.age"></td>
    </tr>
  </table>
</template>

使用计算属性

当需要对表格数据进行过滤或排序时，可以使用计算属性。

computed: {
  filteredData() {
    return this.tableData.filter(item => item.age > 20)
  }
}

第三方表格组件

对于复杂表格需求，可以使用 Element UI 或 Vuetify 等 UI 库提供的表格组件。

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

性能优化

对于大型表格，可以使用虚拟滚动来提高性能。

<template>
  <RecycleScroller
    class="table"
    :items="tableData"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="row">
      <div class="cell">{{ item.name }}</div>
      <div class="cell">{{ item.age }}</div>
    </div>
  </RecycleScroller>
</template>

以上方法涵盖了 Vue 中实现表格更新的常见场景，可以根据具体需求选择合适的方式。

vue实现表格更新