vue实现表格输入

实现表格输入的基本思路

在Vue中实现表格输入功能，通常需要结合表单控件和表格布局。核心是通过v-model绑定数据，动态渲染可编辑的表格单元格。使用数组存储表格数据，通过v-for循环渲染行和列。

基础实现代码示例

<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">
          <input v-model="tableData[rowIndex][cellIndex]" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '职业'],
      tableData: [
        ['', '', ''],
        ['', '', ''],
        ['', '', '']
      ]
    }
  }
}
</script>

动态添加行功能

methods: {
  addRow() {
    this.tableData.push(Array(this.headers.length).fill(''))
  },
  removeRow(index) {
    this.tableData.splice(index, 1)
  }
}

使用组件化实现

可以将表格行封装为单独组件，提高代码复用性：

<template>
  <tr>
    <td v-for="(cell, index) in rowData" :key="index">
      <input v-model="rowData[index]" @blur="onCellChange" />
    </td>
    <td><button @click="$emit('remove')">删除</button></td>
  </tr>
</template>

<script>
export default {
  props: ['rowData'],
  methods: {
    onCellChange() {
      this.$emit('change', this.rowData)
    }
  }
}
</script>

表单验证处理

添加简单的表单验证逻辑：

data() {
  return {
    errors: []
  }
},
methods: {
  validate() {
    this.errors = []
    this.tableData.forEach((row, rowIndex) => {
      row.forEach((cell, cellIndex) => {
        if (!cell) {
          this.errors.push(`第${rowIndex+1}行第${cellIndex+1}列不能为空`)
        }
      })
    })
    return this.errors.length === 0
  }
}

性能优化建议

对于大型表格，考虑使用虚拟滚动技术避免渲染过多DOM节点。可以引入第三方库如vue-virtual-scroller：

import { RecycleScroller } from 'vue-virtual-scroller'

完整功能示例

<template>
  <div>
    <button @click="addRow">添加行</button>
    <table>
      <thead>...</thead>
      <tbody>
        <table-row 
          v-for="(row, index) in tableData"
          :key="index"
          :row-data="row"
          @change="updateRow(index, $event)"
          @remove="removeRow(index)"
        />
      </tbody>
    </table>
    <div v-if="errors.length">
      <p v-for="(error, index) in errors" :key="index">{{ error }}</p>
    </div>
    <button @click="submit">提交</button>
  </div>
</template>

以上实现方式提供了基本的表格输入功能，可以根据实际需求扩展更多特性如单元格类型验证、复杂表头、合并单元格等功能。