快捷導(dǎo)航

Vue3使用el-form嵌套el-table進(jìn)行單條數(shù)據(jù)的表單校驗功能

更新時間：2024年08月22日 10:49:42 作者：前端學(xué)步

在實際開發(fā)過程中,我們經(jīng)常需要處理表格中的表單數(shù)據(jù),比如在編輯表格中的某一行數(shù)據(jù)時進(jìn)行校驗,本文給大家介紹了Vue3使用el-form嵌套el-table進(jìn)行單條數(shù)據(jù)的表單校驗功能,文中有相關(guān)的代碼供大家參考,需要的朋友可以參考下

概述

在實際開發(fā)過程中，我們經(jīng)常需要處理表格中的表單數(shù)據(jù)，比如在編輯表格中的某一行數(shù)據(jù)時進(jìn)行校驗。本文將介紹如何在 Vue3 和 Element Plus 中實現(xiàn)這一功能。

示例代碼

<template>
  <div>
    <el-form ref="formRef" :model="formObj" :rules="rules">
      <el-table :data="formObj.list">
        <el-table-column label="名稱" align="center">
          <template #default="scope">
            <el-form-item
              :prop="'list.' + scope.$index + '.name'"
              :rules="[
                { required: true, message: '名稱不能為空', trigger: 'blur' },
              ]"
            >
              <el-input v-model="scope.row.name" />
            </el-form-item>
            <el-form-item
              :prop="'list.' + scope.$index + '.desc'"
              :rules="[
                { required: true, message: '描述不能為空', trigger: 'blur' },
              ]"
            >
              <el-input v-model="scope.row.desc" />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
let formObj = ref({
  list: [
    {
      name: '',
      desc: ''
    }
  ],
});
 
const formRef = ref(null);
 
const rules = {
  // 這里不需要單獨(dú)定義規(guī)則，因為已經(jīng)在模板中指定了
};
 
// 提交表單
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表單提交成功');
      // 進(jìn)行表單提交邏輯
    } else {
      console.log('表單驗證失敗');
      return false;
    }
  });
};
</script>
 
<style>
</style>

分析

1. 定義表單數(shù)據(jù)

在這個例子中，我們使用了一個名為 formObj 的響應(yīng)式對象來存儲表格的數(shù)據(jù)。formObj 包含一個名為 list 的數(shù)組，數(shù)組中的每個元素都代表表格中的一行。

let formObj = ref({
  list: [
    {
      name: '',
      desc: ''
    }
  ],
});

2. 表單和表格的結(jié)合

在模板中，我們使用 <el-form> 組件包裹整個表格，并將 formObj 作為 model 傳入。這意味著整個表單將與 formObj 的數(shù)據(jù)綁定在一起。

<el-form ref="formRef" :model="formObj" :rules="rules">
  <el-table :data="formObj.list">
    <!-- 表格列內(nèi)容 -->
  </el-table>
</el-form>

3. 單條數(shù)據(jù)的校驗

為了實現(xiàn)每一條數(shù)據(jù)的獨(dú)立校驗，我們需要在 <el-form-item> 中指定 prop 屬性。這里我們使用模板字符串動態(tài)生成 prop 的值，使其能夠指向表格中特定行的特定字段。

<el-form-item
  :prop="'list.' + scope.$index + '.name'"
  :rules="[
    { required: true, message: '名稱不能為空', trigger: 'blur' },
  ]"
>
  <el-input v-model="scope.row.name" />
</el-form-item>

4. 提交表單

當(dāng)用戶點(diǎn)擊提交按鈕時，我們可以通過調(diào)用 <el-form> 的 validate 方法來觸發(fā)表單驗證。

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表單提交成功');
      // 進(jìn)行表單提交邏輯
    } else {
      console.log('表單驗證失敗');
      return false;
    }
  });
};

總結(jié)

通過上述方法，我們可以實現(xiàn)在 Vue3 中使用 Element Plus 的 <el-form> 組件嵌套 <el-table> 進(jìn)行單條數(shù)據(jù)的表單校驗。這在實際項目中非常有用，尤其是需要用戶輸入大量數(shù)據(jù)并進(jìn)行實時驗證的場景下。

到此這篇關(guān)于Vue3使用el-form嵌套el-table進(jìn)行單條數(shù)據(jù)的表單校驗功能的文章就介紹到這了,更多相關(guān)Vue3 el-form嵌套el-table表單校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: