赞
踩
常规情况下。rules和formItem是一对一的。例如下面的情况,判断表单内的测试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("必填项,请输入数据"));
- } 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中就按照常规的写法如下会发现不管如何输入或删除都将触发valid=false校验。如果在validator_isEmpty中打印value值会发现,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("必填项,请输入数据"));
- } 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需要关联到tableData.data,否则使用validate方法将无法触发
2、去掉外层el-form的rules属性
3、对el-table-column里的el-form-item添加rules属性,其中rules中的validator采用bind的方式传递行参数
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("必填项,请输入数据"));
- } 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>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。