vue实现表格添加

实现表格添加功能

在Vue中实现表格添加功能需要结合数据绑定和事件处理。以下是一个完整的实现方案：

基础表格结构

使用v-for指令渲染表格数据，绑定到组件的data属性：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in tableData" :key="index">
          <td v-for="(value, key) in row" :key="key">{{ value }}</td>
          <td><button @click="removeRow(index)">删除</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

数据初始化

在组件中定义表格数据和表头：

export default {
  data() {
    return {
      headers: ['姓名', '年龄', '职业'],
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' }
      ],
      newRow: { name: '', age: '', job: '' }
    }
  }
}

添加行功能

实现添加新行的方法和表单：

<div>
  <input v-model="newRow.name" placeholder="姓名">
  <input v-model="newRow.age" placeholder="年龄">
  <input v-model="newRow.job" placeholder="职业">
  <button @click="addRow">添加</button>
</div>

methods: {
  addRow() {
    if (this.newRow.name && this.newRow.age && this.newRow.job) {
      this.tableData.push({...this.newRow})
      this.newRow = { name: '', age: '', job: '' }
    }
  },
  removeRow(index) {
    this.tableData.splice(index, 1)
  }
}

表单验证

添加简单的表单验证：

addRow() {
  if (!this.newRow.name.trim()) {
    alert('请输入姓名')
    return
  }
  if (isNaN(this.newRow.age) || this.newRow.age <= 0) {
    alert('请输入有效的年龄')
    return
  }
  this.tableData.push({...this.newRow})
  this.newRow = { name: '', age: '', job: '' }
}

完整组件示例

整合所有功能的完整组件：

<template>
  <div>
    <div class="form">
      <input v-model="newRow.name" placeholder="姓名">
      <input v-model="newRow.age" placeholder="年龄" type="number">
      <input v-model="newRow.job" placeholder="职业">
      <button @click="addRow">添加</button>
    </div>

    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in tableData" :key="index">
          <td v-for="(value, key) in row" :key="key">{{ value }}</td>
          <td><button @click="removeRow(index)">删除</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '职业'],
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' }
      ],
      newRow: { name: '', age: '', job: '' }
    }
  },
  methods: {
    addRow() {
      if (!this.newRow.name.trim()) {
        alert('请输入姓名')
        return
      }
      if (isNaN(this.newRow.age) || this.newRow.age <= 0) {
        alert('请输入有效的年龄')
        return
      }
      this.tableData.push({...this.newRow})
      this.newRow = { name: '', age: '', job: '' }
    },
    removeRow(index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
.form {
  margin-bottom: 20px;
}
</style>

使用计算属性优化

对于更复杂的表格，可以使用计算属性处理数据：

computed: {
  filteredData() {
    return this.tableData.filter(row => 
      row.name.includes(this.searchQuery) ||
      row.job.includes(this.searchQuery)
    )
  }
}

与服务端交互

如果需要将数据保存到后端，可以使用axios：

import axios from 'axios'

methods: {
  async saveData() {
    try {
      const response = await axios.post('/api/table', this.tableData)
      console.log('保存成功', response.data)
    } catch (error) {
      console.error('保存失败', error)
    }
  }
}

以上实现涵盖了Vue表格添加功能的核心要素，包括数据绑定、事件处理、表单验证和样式设置。根据实际需求可以进一步扩展功能，如分页、排序或更复杂的验证逻辑。