Vue中 el-form-item值为 null 或 undefined显示““

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

例如:

<template>
  <el-form ref="form" :model="formData" :rules="formRules" label-position="left">
    <el-form-item label="姓名" :label-width="labelWidth">
      <el-input v-model="formData.name" clearable v-if="formData.name !== null && formData.name !== undefined"></el-input>
      <span v-else>&nbsp;</span>
    </el-form-item>
    <el-form-item label="性别" :label-width="labelWidth">
      <el-select v-model="formData.gender" clearable v-if="formData.gender !== null && formData.gender !== undefined">
        <el-option label="男" value="male"></el-option>
        <el-option label="女" value="female"></el-option>
      </el-select>
      <span v-else>&nbsp;</span>
    </el-form-item>
    <el-form-item label="年龄" :label-width="labelWidth">
      <el-input type="number" v-model.number="formData.age" clearable v-if="formData.age !== null && formData.age !== undefined"></el-input>
      <span v-else>&nbsp;</span>
    </el-form-item>
  </el-form>
</template>

<script>
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'
    };
  }
};
</script>

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

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

```vue
<el-form-item :label="'年龄:' + labelSuffix" :label-width="labelWidth" v-if="formData.age !== null && formData.age !== undefined">
  <el-input type="number" v-model.number="formData.age" clearable></el-input>
</el-form-item>
<span v-else>&nbsp;</span>
```

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

有用请点赞,养成良好习惯!

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

猜你喜欢

转载自blog.csdn.net/libusi001/article/details/131191000