需求
根据 Table 表格内的复选框来控制当前选中行是否添加必填校验规则
效果图
文章来源：https://www.toymoban.com/news/detail-782013.html
实现思想
我们需要设置一个 flag 来标识已勾选的行，el-table渲染数据结构是数组对象形式，我们可以在每个对象中手动加如一个标识，例如默认：selected : false，如你的源数据中已有类似key，则可用它作于唯一标识文章来源地址https://www.toymoban.com/news/detail-782013.html
重要代码部分
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>到了这里，关于Element-Puls Form表单内嵌套el-table表格,根据表格复选框多选或单选动态设置行的验证规则的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
