Vue中 el

2023-06-17 04:26| 来源: 网络整理| 查看: 265

可以在 `el-form-item` 中使用表达式，使用 `v-if` 指令判断当前表单项的值是否为 null 或 undefined，如果为 null 或 undefined，就显示空字符串。

例如：

; ; ; export default { data() { return { formData: { name: null, gender: null, age: null }, formRules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], gender: [ { required: true, message: '请选择性别', trigger: 'change' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { validator: (rule, value, callback) => { if (value < 0) { callback(new Error('年龄不能小于0岁')); } else { callback(); } }, trigger: 'blur' } ] }, labelWidth: '120px' }; } };

在上面的代码中，我们在每个表单项中使用 `v-if` 判断当前表单项的值是否为 null 或 undefined，如果为 null 或 undefined，则将当前表单项的值设置为空字符串。这样就可以将值为 null 或 undefined 的表单项显示为空。我们使用 `;` 来占位，使表单外观更美观。

注意：如果在 `el-form-item` 的 `label` 属性和 `v-if` 判断条件中都使用了表达式，那么应该将所有表达式放在一对花括号中。例如：

```vue ; ```

在上面的代码中，我们在 `el-form-item` 的 `label` 属性和 `v-if` 判断条件中都使用了表达式，因此应该将它们放在一对花括号中。

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！

【本文地址】

Vue中 el

Vue中 el

今日新闻

推荐新闻