Vue+Element巧妙实现表格编辑校验功能，新增、编辑、删除、前端存储，分分钟搞定！

如何构建一个功能丰富的 Vue Element UI 表格

Vue Element UI 表格是一个强大的组件，可让你轻松创建动态、可交互的表格。本文将逐步指导你如何构建一个具有行内编辑、校验、新增和删除功能的 Vue Element UI 表格。

1. 基本结构

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" width="180">
  </el-table-column>
  <el-table-column prop="age" label="年龄" width="180">
  </el-table-column>
  <el-table-column prop="address" label="地址" width="180">
  </el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
      <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

此基本结构创建一个带有名、年龄、地址和操作列的简单表格。操作列包含编辑和删除按钮。

2. 添加行内编辑功能

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.name" @change="handleEdit(scope.row)"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.age" @change="handleEdit(scope.row)"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="address" label="地址" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.address" @change="handleEdit(scope.row)"></el-input>
    </template>
  </el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
      <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

在此代码中，我们使用了 slot-scope 来访问表格的行数据 (scope.row)。然后，我们在每个单元格中放置一个 el-input 组件，它允许用户直接在表格中编辑数据。

3. 添加校验功能

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.name" @change="handleEdit(scope.row)" :rules="[{ required: true, message: '姓名不能为空', trigger: 'blur' }]"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.age" @change="handleEdit(scope.row)" :rules="[{ required: true, message: '年龄不能为空', trigger: 'blur' }]"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="address" label="地址" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.address" @change="handleEdit(scope.row)" :rules="[{ required: true, message: '地址不能为空', trigger: 'blur' }]"></el-input>
    </template>
  </el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
      <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

此代码添加了校验功能，要求用户在保存更改之前填写所有必填字段。rules 属性指定校验规则，trigger 属性指定何时触发校验。

4. 添加新增功能

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.name" @change="handleEdit(scope.row)" :rules="[{ required: true, message: '姓名不能为空', trigger: 'blur' }]"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.age" @change="handleEdit(scope.row)" :rules="[{ required: true, message: '年龄不能为空', trigger: 'blur' }]"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="address" label="地址" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.address" @change="handleEdit(scope.row)" :rules="[{ required: true, message: '地址不能为空', trigger: 'blur' }]"></el-input>
    </template>
  </el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
      <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
      <el-button type="text" @click="handleAdd">新增</el-button>
    </template>
  </el-table-column>
</el-table>

此代码添加了一个新增按钮，允许用户在表格的底部添加新行。

5. 添加删除功能

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.name" @change="handleEdit(scope.row)" :rules="[{ required: true, message: '姓名不能为空', trigger: 'blur' }]"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.age" @change="handleEdit(scope.row)" :rules="[{ required: true, message: '年龄不能为空', trigger: 'blur' }]"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="address" label="地址" width="180">
    <template slot-scope="scope">
      <el-input v-model="scope.row.address" @change="handleEdit(scope.row)" :rules="[{ required: true, message: '地址不能为空', trigger: 'blur' }]"></el-input>
    </template>
  </el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
      <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
      <el-button type="text" @click="handleAdd">新增</el-button>
    </template>