vue数据绑定实现表格

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

基础表格实现

通过 v-for 指令遍历数组数据，动态生成表格行。数据存储在组件的 data 属性中，表格结构通过模板语法绑定。

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

动态数据绑定

通过计算属性或方法处理复杂数据逻辑，支持排序、筛选等操作。数据变更会自动触发视图更新。

<template>
  <table>
    <tbody>
      <tr v-for="item in sortedData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.score }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '王五', score: 90 },
        { id: 2, name: '赵六', score: 85 }
      ],
      sortDirection: 'asc'
    };
  },
  computed: {
    sortedData() {
      return [...this.students].sort((a, b) => 
        this.sortDirection === 'asc' 
          ? a.score - b.score 
          : b.score - a.score
      );
    }
  }
};
</script>

双向数据绑定编辑表格

结合 v-model 实现可编辑单元格，数据修改会同步到原始数据中。

<template>
  <table>
    <tbody>
      <tr v-for="item in tableData" :key="item.id">
        <td>
          <input v-model="item.name" type="text">
        </td>
        <td>
          <input v-model="item.age" type="number">
        </td>
      </tr>
    </tbody>
  </table>
</template>

组件化表格

将表格拆分为可复用的子组件，通过 props 传递数据，通过 $emit 触发事件。

<!-- 父组件 -->
<template>
  <DataTable :items="users" @row-click="handleClick" />
</template>

<!-- 子组件 DataTable.vue -->
<template>
  <table>
    <tbody>
      <tr 
        v-for="item in items" 
        :key="item.id"
        @click="$emit('row-click', item)"
      >
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

性能优化

对于大型数据集，使用虚拟滚动技术（如 vue-virtual-scroller）避免渲染所有行。

<template>
  <RecycleScroller
    :items="largeData"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <tr>
        <td>{{ item.id }}</td>
        <td>{{ item.content }}</td>
      </tr>
    </template>
  </RecycleScroller>
</template>