vue3在table里使用elementUI的form表单验证

        常规情况下。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>

代码007普通

打赏 收藏 海报 链接