快捷導(dǎo)航

vue3在table里使用elementUI的form表單驗證的示例代碼

更新時間：2023年12月13日 11:28:14 作者：小朱小先生

這篇文章主要介紹了vue3在table里使用elementUI的form表單驗證的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

常規(guī)情況下。rules和formItem是一對一的。例如下面的情況，判斷表單內(nèi)的測試1和測試2是否為空。

<template>
    <el-form
        :model="formParams.form"
        :rules="formParams.rules"
    >
      <el-form-item label="測試1" prop="input1">
        <el-input v-model="formParams.form.input1"></el-input>
      </el-form-item>
      <el-form-item label="測試2" prop="input2">
        <el-input v-model="formParams.form.input2"></el-input>
      </el-form-item>
    </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
const formParams = reactive({
  form:{
    input1: "",
    input2: ""
  },
  rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
function validator_isEmpty (rule: any, value: string, callback: any)  {
  if (isEmpty(value)) {
  callback(new Error("必填項，請輸入數(shù)據(jù)"));
} else {
  callback();
}
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>

但是，如果在table中就按照常規(guī)的寫法如下會發(fā)現(xiàn)不管如何輸入或刪除都將觸發(fā)valid=false校驗。如果在validator_isEmpty中打印value值會發(fā)現(xiàn)，value一直未undefined。

<template>
  <el-form
      :model="tableData.data"
      :rules="tableData.rules"
  >
    <el-table
        :data="tableData.data">
      <el-table-column label="測試1">
        <template #default="scope">
          <el-form-item prop="input1">
            <el-input v-model="scope.row.input1"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="測試2">
        <template #default="scope">
          <el-form-item prop="input2">
            <el-input v-model="scope.row.input2"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
let tableData = reactive({
data:[
  {
    input1: "",
    input2: ""
  }
],
rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
const formParams = reactive({
  form: {
    input1: "",
    input2: ""
  },
  rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
function validator_isEmpty(rule: any, value: string, callback: any) {
  if (isEmpty(value)) {
    callback(new Error("必填項，請輸入數(shù)據(jù)"));
  } else {
    callback();
  }
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>

所以使用下面的方式。但是有幾個重點。

1、外層的el-form的model需要關(guān)聯(lián)到tableData.data，否則使用validate方法將無法觸發(fā)

2、去掉外層el-form的rules屬性

3、對el-table-column里的el-form-item添加rules屬性，其中rules中的validator采用bind的方式傳遞行參數(shù)

4、對el-table-column里的el-form-item中prop屬性需要保留

之后的操作就跟普通的form驗證一樣

<template>
  <el-form
      :model="tableData.data"
  >
    <el-table
        :data="tableData.data">
      <el-table-column label="測試1">
        <template #default="scope">
          <el-form-item prop="input1" :rules="{
            validator: validator_isEmpty_arg.bind(this, scope.row.input1),
            trigger: 'change'
          }">
            <el-input v-model="scope.row.input1"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="測試2">
        <template #default="scope">
          <el-form-item prop="input2" :rules="{
            validator: validator_isEmpty_arg.bind(this, scope.row.input2),
            trigger: 'change'
          }">
            <el-input v-model="scope.row.input2"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
let tableData = reactive({
  data: [
    {
      input1: "",
      input2: ""
    }
  ]
})
function validator_isEmpty_arg(rowValue: any, rule: any,value: string, callback: any){
  if (isEmpty(rowValue)) {
    callback(new Error("必填項，請輸入數(shù)據(jù)"));
  } else {
    callback();
  }
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>

到此這篇關(guān)于vue3在table里使用elementUI的form表單驗證的文章就介紹到這了,更多相關(guān)vue3 elementUI的form表單驗證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: