Element-Puls Form表单内嵌套el-table表格,根据表格复选框多选或单选动态设置行的验证规则

需求

根据 Table 表格内的复选框来控制当前选中行是否添加必填校验规则

效果图

实现思想

我们需要设置一个 flag 来标识已勾选的行，el-table渲染数据结构是数组对象形式，我们可以在每个对象中手动加如一个标识，例如默认：selected : false，如你的源数据中已有类似key，则可用它作于唯一标识

重要代码部分

html代码

<template>
  <div>
    <el-form :model="productInfoForm" ref="productInfoFormRef" :rules="productInfoRules">
      <el-table ref="multipleTableRef" :data="productInfoForm.skuList" @select-all="handleSelectionChangeAll"
        @select="handleSelection" @selection-change="handleSelectionChange">
        <!-- 复选框 -->
        <el-table-column type="selection" width="55" />
        <!-- 需要动态设置校验项 -->
        <el-table-column>
          <template #header>
            <div>
              <span v-text="`您的售价`"></span>
            </div>
          </template>
          <template #default="scope">
            <div>
              <el-form-item :ref="`unitPrice_${scope.$index}`" :prop="`skuList.${scope.$index}.unitPrice`"
                :rules="getRules(scope.row.selected, scope.$index, 'unitPrice')">
                <div class="flex-box">
                  <p class="fs-12 flex-shrink" v-text="`产品单价`"></p>
                  <el-input v-model="scope.row.unitPrice" placeholder="0"
                    @blur="(e: Event) => { scope.row.unitPrice = (e.target as HTMLInputElement).value }">
                    <template #prefix><span v-text="`￥`"></span></template>
                  </el-input>
                </div>
              </el-form-item>

              <el-form-item :ref="`operationFee_${scope.$index}`" :prop="`skuList.${scope.$index}.operationFee`"
                :rules="getRules(scope.row.selected, scope.$index, 'operationFee')">
                <div class="flex-box">
                  <p class="fs-12 flex-shrink" v-text="`操作费`"></p>
                  <el-input v-model="scope.row.operationFee" placeholder="0"
                    @blur="(e: Event) => { scope.row.operationFee = (e.target as HTMLInputElement).value }">
                    <template #prefix><span v-text="`￥`"></span></template>
                  </el-input>
                </div>
              </el-form-item>

              <el-form-item :ref="`finalDeliveryFee_${scope.$index}`" :prop="`skuList.${scope.$index}.finalDeliveryFee`"
                :rules="getRules(scope.row.selected, scope.$index, 'finalDeliveryFee')">
                <div class="flex-box">
                  <p class="fs-12 flex-shrink" v-text="`尾程派送费`"></p>
                  <el-input v-model="scope.row.finalDeliveryFee" placeholder="0"
                    @blur="(e: Event) => { scope.row.finalDeliveryFee = (e.target as HTMLInputElement).value }">
                    <template #prefix><span v-text="`￥`"></span></template>
                  </el-input>
                </div>
              </el-form-item>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 操作按钮 -->
      <div>
        <el-button :disabled="createProductDisabled" plain v-text="`保存`" @click="saveProduct"></el-button>
        <el-button :disabled="createProductDisabled" type="primary" v-text="`提交审核`" @click="saveProduct"></el-button>
      </div>
    </el-form>
  </div>
</template>

js代码

<script setup lang="ts">
import { ElForm } from 'element-plus';
import { ref, reactive, toRefs, computed, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const productInfoFormRef = ref(ElForm)
const multipleTableRef = ref<any>()

const data = reactive<any>({
  productInfoForm: {
    skuList: [
      {
        selected: false,
        unitPrice: '',
        operationFee: '',
        finalDeliveryFee: '',
      }
    ]
  },
  productInfoRules: {
    unitPrice: {
      required: true,
      message: '请完善必须项',
      tirgger: ['blur', 'change']
    },
    operationFee: {
      required: true,
      message: '请完善必须项',
      tirgger: ['blur', 'change']
    },
    finalDeliveryFee: {
      required: true,
      message: '请完善必须项',
      tirgger: ['blur', 'change']
    },
  },
  createProductDisabled: true,
});
const { productInfoForm, productInfoRules, createProductDisabled } = toRefs(data);

// 根据flag动态设置表单校验规则
const getRules = computed(() => (selected: boolean, index: number, type: string) => {
  nextTick(() => {
    if (proxy?.$refs[`${type}_${index}`] && !selected) {
      (proxy?.$refs[`${type}_${index}`] as any).clearValidate()
    }
    // console.log(proxy?.$refs[`${type}_${index}`]);
  })
  return selected ? productInfoRules.value[type] : {}
})

//当选择项发生变化时会触发该事件
const handleSelectionChange = (valArr: any[]) => {
  createProductDisabled.value = valArr.length ? false : true
}

//当用户手动勾选数据行的 Checkbox 时触发的事件
const handleSelection = (valArr: any[], row: { selected: boolean; }) => {
  row.selected = !row.selected
}

//监听table全选
const handleSelectionChangeAll = (valArr: any[]) => {
  const skuList = productInfoForm.value.skuList
  skuList.forEach((i: { selected: boolean; }) => {
    i.selected = valArr.length ? true : false
  })
}

//创建并提交审核商品
const saveProduct = async () => {
  productInfoFormRef.value.validate(async (valid: boolean, fields: any) => {
    if (valid) {
      // 表单验证通过后相关逻辑处理...

    } else {
      console.log('error submit!', fields);
    }
  })
}
</script>

<style scoped lang="scss"></style>