The value of el-form-item in Vue is null or undefined displays ""

Expressions can be used in `el-form-item`, and `v-if` directives can be used to determine whether the value of the current form item is null or undefined, and if it is null or undefined, an empty string will be displayed.

For example:

<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>

In the above code, we use `v-if` in each form item to judge whether the value of the current form item is null or undefined, and if it is null or undefined, set the value of the current form item to an empty string. This makes it possible to display form items with a value of null or undefined as empty. We use ` ` for placeholders to make the form look nicer.

Note: If expressions are used in both the `label` attribute of `el-form-item` and the `v-if` judgment condition, then all expressions should be enclosed in a pair of curly braces. For example:

```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>
```

In the above code, we used expressions both in the `label` attribute of `el-form-item` and in the `v-if` judgment condition, so they should be enclosed in a pair of curly braces.

Please like it if it is useful, and develop a good habit!

Please leave a message for questions, exchanges, and encouragement!