vue 实现动态表格

Vue 动态表格实现方法

基础表格结构

使用 v-for 指令动态渲染表格行和列，数据通过 data 属性绑定：

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

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

动态列控制

通过计算属性实现动态列显示：

<template>
  <div>
    <label v-for="header in allHeaders" :key="header">
      <input type="checkbox" v-model="visibleHeaders" :value="header"> 
      {{ header }}
    </label>
    <table>
      <thead><!-- 仅显示选中列 --></thead>
      <tbody><!-- 对应数据渲染 --></tbody>
    </table>
  </div>
</template>

<script>
export default {
  computed: {
    filteredHeaders() {
      return this.allHeaders.filter(header => 
        this.visibleHeaders.includes(header)
      )
    }
  }
}
</script>

可编辑单元格

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

<template>
  <td v-for="(cell, cellIndex) in row" :key="cellIndex">
    <input v-if="editable[rowIndex][cellIndex]" 
           v-model="tableData[rowIndex][cellIndex]">
    <span v-else @click="startEdit(rowIndex, cellIndex)">{{ cell }}</span>
  </td>
</template>

<script>
methods: {
  startEdit(row, col) {
    this.$set(this.editable[row], col, true)
  }
}
</script>

服务端数据加载

使用 axios 异步加载数据：

<script>
import axios from 'axios'

export default {
  mounted() {
    axios.get('/api/table-data').then(response => {
      this.tableData = response.data
    })
  }
}
</script>

性能优化

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

<template>
  <div class="table-container" @scroll="handleScroll">
    <div class="table-body" :style="{ height: totalHeight + 'px' }">
      <div v-for="(row, index) in visibleRows" :key="index" class="row">
        <!-- 行内容渲染 -->
      </div>
    </div>
  </div>
</template>

完整组件示例

<template>
  <div>
    <table class="dynamic-table">
      <thead>
        <tr>
          <th v-for="header in filteredHeaders" :key="header">
            {{ header }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in visibleRows" :key="rowIndex">
          <td v-for="(header, colIndex) in filteredHeaders" :key="colIndex">
            <editable-cell 
              :value="row[header]"
              @update="val => updateCell(rowIndex, header, val)"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  components: {
    EditableCell: {
      props: ['value'],
      template: `
        <div @click="edit = true" v-if="!edit">
          {{ value }}
        </div>
        <input v-else v-model="localValue" @blur="save"/>
      `,
      data: () => ({ edit: false, localValue: '' }),
      methods: {
        save() {
          this.$emit('update', this.localValue)
          this.edit = false
        }
      }
    }
  }
}
</script>