当前位置：首页 > VUE

vue数据绑定实现表格

2026-01-23 01:14:44VUE

Vue 数据绑定实现表格的方法

基础表格绑定

使用 v-for 指令循环渲染表格行，绑定动态数据到表格单元格：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td v-for="(value, key) in item" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

动态属性绑定

为表格元素添加动态样式或属性：

<tr v-for="item in tableData" 
    :class="{ 'active-row': item.isActive }"
    @click="selectRow(item)">
  <td>{{ item.name }}</td>
</tr>

计算属性处理数据

使用计算属性对表格数据进行处理：

vue数据绑定实现表格

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

使用组件化表格

创建可复用的表格组件：

<template>
  <table>
    <slot name="header"></slot>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <slot :row="item"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: ['data']
}
</script>

服务端数据绑定

结合 axios 获取远程数据：

vue数据绑定实现表格

import axios from 'axios'

export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    axios.get('/api/data').then(response => {
      this.tableData = response.data
    })
  }
}

使用第三方表格组件

集成 Element UI 等 UI 库的表格组件：

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

响应式更新

确保数据变化时表格自动更新：

this.$set(this.tableData, index, newItem)
// 或
this.tableData.splice(index, 1, newItem)

性能优化

对于大型数据集使用虚拟滚动：

<virtual-list :size="50" :remain="20" :data="largeData">
  <table>
    <tr v-for="item in virtualData" :key="item.id">
      <td>{{ item.name }}</td>
    </tr>
  </table>
</virtual-list>