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

Myth丶恋晨 2024-03-16 17:38 21阅读 0赞

可以在 \`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> </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> </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> </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\` 判断条件中都使用了表达式，因此应该将它们放在一对花括号中。

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

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