elementui表格如何用v-show

发布网友发布时间：2022-12-21 07:40

共1个回答

热心网友时间：2023-10-08 17:10

经常使用v-if来让el-form-item表单元素显示隐藏，因为之前使用v-show会导致rules判断错误，隐藏着的元素也加入rules的判断中去，导致没有办法正常提交，所以基本使用的v-if来控制el-form-item。
后来考虑这种不停切换选择来让el-form-item显示和隐藏的使用v-show更合适，就找了一种办法在使用v-show的情况下同样可以让rules正常判断。
先看下v-if的使用情况，这个大家都能正常使用。

<el-form-item v-if="form.a == 1" label="xxx" prop="abc">
<el-input v-model="form.abc" />
</el-form-item>
rules: {
abc: [{ required: true, message: "请输入xxx", trigger: "blur" }]
}
登录后复制
这种情况下我们在提交代码的时候如果v-if判断为false，el-form-item就没有这一项，rules也不会去检测，this.$refs[“form”].validate(valid => { 这里判断valid为true是正常可以通过的 }）。
但是我们使用v-show会是另一种情况

<el-form-item v-show="form.a == 1" label="xxx" prop="abc">
<el-input v-model="form.abc" />
</el-form-item>
rules: {
abc: [{ required: true, message: "请输入xxx", trigger: "blur" }]
}
登录后复制
这种情况this.$refs[“form”].validate(valid => { 这里判断valid为false }），因为form.abc为空，没能通过判断，究其原因是v-show的时候el-form-item只是display：none隐藏掉了，但是这一项还是会加入到rules的判断中导致我们再提交时发生错误，那么怎么才能使用v-show同时又可以正常提交呢

<el-form-item v-show="form.a == 1" label="xxx" prop="abc"
:rules="{required: form.a == 1 ? true : false, message: 'yi', trigger: 'blur'}">
<el-input v-model="form.abc" />
</el-form-item>
// 这种情况下abc就不用固定加入rules中去了
登录后复制
这样，在form.a == 1的时候既可以让form.abc元素显示出来，又让他的rules设置为true必须，当form.a不为1的时候让form.abc隐藏了起来，同时rules又设置为了flase不必须，这样我们在提交的时候就可以让this.$refs[“form”].validate(valid => { }）作出正常的判断了，同时使用的v-show来控制元素的显示隐藏，节省了消耗还可以频繁地切换