el-form, el-table可编辑行表格与关联验证和异步验证

2023-09-24 11:23:16

可编辑行表格：实现高性能和轻松验证

概要

可编辑行表格是表格的一种交互形式，允许用户逐行编辑数据，而不会影响其他行。这种方法提高了性能，并通过只验证当前正在编辑的行来简化验证过程。本博客将深入探讨实现可编辑行表格所需的步骤，包括配置、验证规则和事件处理。

配置

实现可编辑行表格的第一步是配置表格。以下代码示例演示了如何在 Vue.js 中使用 Element UI 创建可编辑行表格：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="account" label="账号"></el-table-column>
  <el-table-column prop="email" label="邮箱"></el-table-column>
</el-table>

验证规则

验证规则用于确保用户输入的数据符合预期的格式和限制。以下代码示例演示了如何为 "账号" 列配置必填和异步验证规则：

:rules="[{ required: true, message: '账号不能为空', trigger: 'blur' },
{ validator: validateAccount, trigger: 'blur' }]"

事件处理

事件处理对于处理用户与表格的交互至关重要。以下代码示例演示了如何处理行单击事件以启用行编辑：

@row-click="handleRowClick"

在处理行单击事件时，必须检查是否存在其他正在编辑的行。只有在当前没有编辑行时才能开始编辑新的行。

示例代码

以下完整的代码示例演示了如何在 Vue.js 中实现可编辑行表格：

<template>
  <div>
    <el-form :model="form" ref="form" label-width="80px">
      <el-table :data="tableData" @row-click="handleRowClick">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="account" label="账号">
          <template #default="scope">
            <el-input v-if="editingRow === scope.row" v-model="scope.row.account"></el-input>
            <span v-else>{{ scope.row.account }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="confirmEmail" label="确认邮箱"></el-table-column>
      </el-table>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const form = ref({})
    const tableData = ref([
      { name: '张三', account: 'zs', email: 'zhangsan@example.com', confirmEmail: 'zhangsan@example.com' },
      { name: '李四', account: 'ls', email: 'lisi@example.com', confirmEmail: 'lisi@example.com' },
      { name: '王五', account: 'ww', email: 'wangwu@example.com', confirmEmail: 'wangwu@example.com' }
    ])
    const editingRow = ref(null)

    const handleRowClick = (row, column, event) => {
      if (editingRow.value !== null) {
        return
      }
      editingRow.value = row
    }

    const handleSave = () => {
      editingRow.value = null
    }

    return { form, tableData, editingRow, handleRowClick, handleSave }
  }
}
</script>