<el-form-item prop="expirationDate" :label="'用户有效期'"> <el-input v-model="editForm.expirationDate" clearable></el-input> </el-form-item> 这一段怎么加上一个if条件 只有一个集合包含了一个名称才能显示这个
时间: 2024-01-21 10:16:48 浏览: 70
你可以使用 `v-if` 指令来实现这个条件判断。可以在模板中使用一个计算属性来判断集合是否包含指定名称,然后在表单项上使用 `v-if` 指令来控制其显示或隐藏。示例代码如下:
```html
<template>
<el-form :model="editForm" ref="editForm" label-width="120px">
<el-form-item prop="name" :label="'用户名'">
<el-input v-model="editForm.name" clearable></el-input>
</el-form-item>
<el-form-item prop="expirationDate" :label="'用户有效期'" v-if="hasExpirationDate">
<el-input v-model="editForm.expirationDate" clearable></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
editForm: {
name: '',
expirationDate: ''
},
collection: ['collection1', 'collection2'] // 集合
}
},
computed: {
hasExpirationDate() {
return this.collection.includes('collection1') // 判断集合是否包含指定名称
}
}
}
</script>
```
在上面的示例代码中,我们定义了一个名为 `hasExpirationDate` 的计算属性来判断集合中是否包含名称为 `collection1` 的项。在表单项上使用 `v-if` 指令来控制其显示或隐藏,只有当 `hasExpirationDate` 的值为 `true` 时,该表单项才会显示出来。
阅读全文