vue 实现动态表格

实现动态表格的基本思路

在Vue中实现动态表格通常涉及以下核心逻辑：数据驱动渲染、动态列与行处理、以及用户交互功能（如增删改查）。以下是具体实现方法：

基础动态表格实现

使用v-for指令循环渲染表格行和列，数据存储在Vue的data中：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(column, index) in columns" :key="index">{{ column.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <td v-for="(column, colIndex) in columns" :key="colIndex">
          {{ row[column.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' }
      ],
      tableData: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ]
    };
  }
};
</script>

动态添加/删除行列

通过方法修改数据实现动态增删：

<template>
  <button @click="addRow">添加行</button>
  <button @click="addColumn">添加列</button>
  <!-- 表格结构同上 -->
</template>

<script>
export default {
  methods: {
    addRow() {
      this.tableData.push({ name: '新用户', age: 0 });
    },
    addColumn() {
      this.columns.push({ title: '新列', key: 'newColumn' });
      this.tableData.forEach(row => row.newColumn = '默认值');
    }
  }
};
</script>

可编辑表格

结合v-model实现单元格编辑：

<template>
  <td v-for="(column, colIndex) in columns" :key="colIndex">
    <input 
      v-if="editable[rowIndex][colIndex]" 
      v-model="row[column.key]"
      @blur="toggleEdit(rowIndex, colIndex)"
    >
    <span v-else @click="toggleEdit(rowIndex, colIndex)">{{ row[column.key] }}</span>
  </td>
</template>

<script>
export default {
  data() {
    return {
      editable: [] // 二维数组记录编辑状态
    };
  },
  created() {
    // 初始化编辑状态矩阵
    this.editable = this.tableData.map(() => 
      Array(this.columns.length).fill(false)
    );
  },
  methods: {
    toggleEdit(rowIndex, colIndex) {
      this.$set(this.editable[rowIndex], colIndex, !this.editable[rowIndex][colIndex]);
    }
  }
};
</script>

性能优化建议

对于大数据量场景，建议使用虚拟滚动或分页：

• 虚拟滚动库：vue-virtual-scroller
• 分页组件：v-pagination或自定义分页逻辑

<template>
  <div v-for="row in visibleData" :key="row.id"><!-- 仅渲染可视区域 --></div>
</template>

复杂功能扩展

1. 动态表头排序
   通过@click事件触发排序方法，更新tableData排序。

2. 列宽拖动
   使用mousedown事件监听，结合resize样式实现。

3. 服务端数据
   通过axios异步获取数据，更新tableData。

以上方法可根据实际需求组合使用，Vue的动态响应特性会自动处理视图更新。