element-puls封装表单验证

项目场景：

提示：这里简述项目相关背景：

在做项目中会有一些简单的表单非空验证，这些验证比较简单，就是代码看着有点多，做起来浪费时间，所以我们可以将这个方法封装起来，然后挂载全局，这样使用起来就方便多了（由于是挂载全局，所以用的时候都不用二次引入了）

分析：

提示：这里填写问题的分析：

要在全局挂载，vue3提供了一个方法app.config.globalProperties，这个方法可以将封装的方法挂载到全局

import formRules from '@/hooks/FormRules';//引入 封装好的方法  --表单验证的封装方法

const app = createApp(App)
app.config.globalProperties.formRules=formRules;//全局挂载方法

具体方案：

提示：这里填写该问题的具体解决方案：

1：封装表单验证的方法 ts文件

FormRules.ts

/*
  type 1 输入框 2 选择框
*/ 
export default function formRules (name:string,type :string|number=1) {
  if(type==1){
    return [
      {required: true, message:name+'不能为空', trigger: 'blur'},
      {required: true, message:name+'不能为空', trigger: 'change'},
    ]
  }else if(type==2){
    return [
      {required: true, message:'请选择'+name, trigger: 'change'},
    ]
  }
}

2：全局挂载

import formRules from '@/hooks/FormRules';//引入 封装好的方法  --表单验证的封装方法

const app = createApp(App)
app.config.globalProperties.formRules=formRules;//全局挂载方法

3：使用

1：表单使用

<el-form-item
    label="是否合格"
    prop="isQualified"
    :rules="formRules('是否合格',2)"
    >
    <el-select
        v-model="formData.isQualified"
        placeholder="请选择是否合格">
        <el-option
            v-for="item in standardOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
     </el-select>
</el-form-item>
<el-form-item 
    label="供货单号" 
    prop="supplyOrderNumber" 
    :rules="formRules('供货单号')">
    <el-input 
        v-model="formData.supplyOrderNumber" 
        placeholder="请输入供货单号"/>                        
</el-form-item>

2：表格使用

<el-table-column label="供应商代码" prop="supplierCode" min-width="180">
        <template #header v-if="props.tableList.length>0">
          <div >
            <span style="color:red">*</span>供应商代码
          </div>
        </template>
        <template #default="scope">
          <el-form-item 
            :prop="'tableList['+scope.$index+'].supplierCode'" 
            :rules="formRules('供应商代码',2)">
            <div style="display:flex">
              <el-input 
                    v-model="scope.row.supplierCode" 
                    placeholder="请选择供应商代码" disabled/>
              <el-button
                v-if="!disabled"
                link type="primary"
                @click="suppSelect(scope.row,scope.$index)">选择</el-button>
            </div>
          </el-form-item>
        </template>
      </el-table-column>