el-collapse 组件回车键会触发显隐(第一次手动触发后)
因为change方法原因
可以把事件放到title插槽上面
<template>
<div class="coordination-communication">
<el-collapse v-model="activeNames" class="lh-collapse">
<el-collapse-item name="基本信息" disabled>
<template #title>
<div class="title" @click.stop="handleChange('基本信息')">基本信息</div>
</template>
<detailForm ref="detailFormRef" :form="formValidation.formData" :title="props.title" />
</el-collapse-item>
<el-collapse-item name="回复栏" disabled>
<template #title>
<div class="title" @click.stop="handleChange('回复栏')">回复栏</div>
</template>
<div class="reply-input">
<el-input v-model="formValidation.formData.replyInput" placeholder="请输入回复,点击提交确认" />
</div>
<reply-bar ref="replyBarRef" :form="formValidation.formData" :title="props.title" />
</el-collapse-item>
<el-collapse-item name="审核栏" disabled>
<template #title>
<div class="title" @click.stop="handleChange('审核栏')">审核栏</div>
</template>
<review-column ref="reviewColumnRef" :form="formValidation.formData" />
</el-collapse-item>
</el-collapse>
</div>
</template>
/**切换展开收起折叠面板 */
const handleChange = (val: string) => {
if (activeNames.value.includes(val)) {
activeNames.value = activeNames.value.filter((item: string) => item !== val);
} else {
activeNames.value.push(val);
}
};
.coordination-communication {
height: calc(100% - 30px);
overflow-y: scroll;
margin: 15px 15px 15px 15px;
border-radius: 8px;
padding: 15px;
/**回复栏的回复输入框 */
.reply-input {
padding: 0px 0 15px 0px;
}
/**折叠面板 --lh */
.lh-collapse {
.title {
width: 100%;
text-align: left;
}
:deep(.el-collapse-item .el-collapse-item__header) {
flex-direction: row-reverse;
justify-content: flex-end;
background-color: #f3f7fa;
color: #333333;
font-size: 14px;
height: 42px;
line-height: 42px;
border-radius: 4px;
width: 100%;
cursor: pointer;
// border: 1px solid #ece5e5;
}
:deep(.el-collapse-item__arrow) {
margin: 0 8px 0 10px !important;
}
:deep(.el-collapse-item__content) {
padding: 15px 10px !important;
.demo-collapse-Con {
margin-top: 5px !important;
}
}
}
}