vue表格实现插入

Vue表格实现插入功能

在Vue中实现表格的插入功能，通常需要结合数据绑定和数组操作。以下是一个基于Element UI的示例实现方法：

数据准备 定义表格数据和表单数据：

data() {
  return {
    tableData: [
      { name: '张三', age: 20 },
      { name: '李四', age: 25 }
    ],
    form: {
      name: '',
      age: ''
    }
  }
}

表格渲染 使用Element UI的el-table组件：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

插入表单 添加表单用于输入新数据：

<el-form :model="form">
  <el-form-item label="姓名">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="年龄">
    <el-input v-model="form.age"></el-input>
  </el-form-item>
  <el-button @click="addRow">添加</el-button>
</el-form>

插入方法 实现添加新行的逻辑：

methods: {
  addRow() {
    if (this.form.name && this.form.age) {
      this.tableData.push({
        name: this.form.name,
        age: this.form.age
      })
      this.form.name = ''
      this.form.age = ''
    }
  }
}

自定义表格实现插入

如果不使用UI框架，可以这样实现：

基本结构

<table>
  <tr v-for="(item, index) in items" :key="index">
    <td>{{ item.name }}</td>
    <td>{{ item.value }}</td>
  </tr>
</table>
<input v-model="newItem.name">
<input v-model="newItem.value">
<button @click="addItem">添加</button>

插入逻辑

data() {
  return {
    items: [
      { name: '项目1', value: '值1' }
    ],
    newItem: { name: '', value: '' }
  }
},
methods: {
  addItem() {
    if (this.newItem.name && this.newItem.value) {
      this.items.push({...this.newItem})
      this.newItem = { name: '', value: '' }
    }
  }
}

插入指定位置

要在特定位置插入行，可以使用数组的splice方法：

insertAt(index) {
  this.tableData.splice(index, 0, {
    name: this.form.name,
    age: this.form.age
  })
}

表单验证

添加简单的验证确保数据完整：

addRow() {
  if (!this.form.name || !this.form.age) {
    alert('请填写完整信息')
    return
  }
  // 插入逻辑...
}

以上方法提供了在Vue中实现表格插入功能的不同方案，可以根据项目需求选择合适的实现方式。