el-form + el-table实现多个表格内容编辑和校验，解锁数据编辑新方式

前端

2024-01-03 10:03:49

轻松实现表格编辑和校验：Vue.js中的el-form + el-table

在前端开发中，我们经常需要创建交互式表格，允许用户编辑和验证数据。使用Vue.js框架，我们可以轻松地利用el-form和el-table组件来实现这一功能。

el-form和el-table

el-form 组件为表单管理提供了强大且灵活的功能。我们可以使用el-form来定义数据模型并对其进行校验。

el-table 组件用于呈现和操作表格数据。通过将表格数据与el-form表单数据绑定，我们可以实现表格内容的实时编辑。

步骤一：创建el-form表单

首先，我们需要创建一个el-form表单来管理表格数据。我们可以使用以下代码创建el-form表单：

<el-form ref="form" :model="formData" label-width="120px">
  <!-- 表格组件 -->
  <el-table :data="tableData" border>
    <!-- 表格列 -->
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <el-input v-model="scope.row.name"></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" type="number"></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"></el-input>
      </template>
    </el-table-column>
  </el-table>
</el-form>

步骤二：实现表格内容编辑

在el-table表格中，我们可以使用v-model指令将表格数据绑定到el-form表单数据。这样，当用户编辑表格内容时，el-form表单数据也会自动更新。

步骤三：实现表格数据校验

为了确保表格数据输入的准确性，我们可以使用el-form的校验规则来对表格数据进行校验。我们可以使用以下代码在el-form表单中添加校验规则：

this.$refs['form'].validate((valid) => {
  if (valid) {
    // 表单数据通过校验
  } else {
    // 表单数据未通过校验
  }
});

示例代码

以下是一个完整的示例代码，演示了如何使用el-form和el-table实现表格编辑和校验：

<template>
  <el-form ref="form" :model="formData" label-width="120px">
    <el-table :data="tableData" border>
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name"></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" type="number"></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"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        address: ''
      },
      tableData: [
        {
          name: 'John Doe',
          age: 30,
          address: '123 Main Street'
        },
        {
          name: 'Jane Doe',
          age: 25,
          address: '456 Elm Street'
        }
      ]
    };
  },
  methods: {
    validateForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 表单数据通过校验
        } else {
          // 表单数据未通过校验
        }
      });
    }
  }
};
</script>