最近再写项目时,使用elementPlus的tab栏组件里面嵌套一个form表单,提交表单时发现拿不到表单ref,导致无法校验。
举个例子:
<template>
<div>
<el-tabs v-model="activeName" class="demo-tabs" ref="tabsRef" @tab-click="handleClick">
<el-tab-pane v-for="item in arr" :key="item.value" :label="item.label" :name="item.value">
<el-form ref="dialogRefs" :model="dialogueForm" width="1200px" label-width="120px;" :rules="rules">
<el-col :span="12">
<el-form-item label="序号:" prop="sort">
<el-input v-model="dialogueForm.sort" placeholder="请填写" />
</el-form-item>
</el-col>
<div class="dialog-footer">
<el-button type="primary" @click="confirmBtn">提交</el-button>
</div>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup>
const activeName = ref('0')
const tabsRef = ref(null)
const arr = ref([
{
label: "切换1",
value: "0"
},
{
label: "切换2",
value: "1"
},
{
label: "切换3",
value: "2"
},
{
label: "切换4",
value: "3"
},
])
const dialogueForm = ref({})
const dialogRefs = ref(null)
const rules = ref({
sort: [{ required: true, message: '请输入', trigger: 'blur' }],
})
const handleClick = (tabs) => {
activeName.value = tabs.props.name
}
const confirmBtn = () => {
console.log(dialogRefs.value, '拿到了吗')
// dialogRefs.value.validate((valid) => {
// if (valid) {
// console.log('通过')
// } else {
// console.log('不通过')
// }
// })
}
</script>
<style lang="scss" scoped></style>
打印的ref是null,根本无法取到
解决方法:
1.将form表单改成":ref='xxx"
<el-form :model="dialogueForm" :ref="dialogRefs" width="1200px" label-width="120px;" :rules="rules">
2.调用函数,往新数组里面添加
const dialogRefsArr = ref([])
const dialogRefs = (el) => {
dialogRefsArr.value.push(el)
}
3.提交时,将索引传过去,遍历找到那个表单的ref进行检验
const confirmBtn = (index) => {
dialogRefsArr.value.forEach((item, i) => {
if (i == index) {
item.validate(flag => {
if (flag) {
console.log('通过了')
} else {
console.log('没通过')
}
})
}
})
}
4.在合适的地方清空检验并清空数组。我这个是tab栏,在切换tab时清空检验和数组
const handleClick = (tabs) => {
//必须先清掉校验,再将dialogRefsArr置空
dialogRefsArr.value.forEach(item => item.clearValidate()) //清空检验
dialogRefsArr.value = [] //清空数组
activeName.value = tabs.props.name
}
小伙伴们,有遇到类似的问题吗?如果有更好的解决方案,欢迎评论区一起交流!