Las expresiones se pueden usar en `el-form-item`, y las directivas `v-if` se pueden usar para determinar si el valor del elemento de formulario actual es nulo o indefinido, y si es nulo o indefinido, se mostrará una cadena vacía. se mostrará.
Por ejemplo:
<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>
En el código anterior, usamos `v-if` en cada elemento de formulario para juzgar si el valor del elemento de formulario actual es nulo o indefinido, y si es nulo o indefinido, establecemos el valor del elemento de formulario actual en un valor vacío. cadena. Esto hace posible mostrar elementos de formulario con un valor nulo o indefinido como vacíos. Usamos ` ` para marcadores de posición para que el formulario se vea mejor.
Nota: si se usan expresiones tanto en el atributo `label` de `el-form-item` como en la condición de juicio `v-if`, entonces todas las expresiones deben encerrarse entre un par de llaves. Por ejemplo:
```vue
<el-form-item :label="'年龄:' + labelSuffix" :label-width="labelWidth" v-if="formData.age !== null && formData.age !== indefinido" >
<el-input type="number" v-model.number="formData.age" clearable></el-input>
</el-form-item>
<span v-else> </span>
` ``
En el código anterior, usamos expresiones tanto en el atributo `label` de `el-form-item` como en la condición de juicio `v-if`, por lo que deben encerrarse entre un par de llaves.
¡Por favor, dale me gusta si es útil y desarrolla un buen hábito!
¡Deje un mensaje para preguntas, intercambios y aliento!