el-collapse 组件回车键会触发显隐,如何去掉回车出发显隐
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;
}
}
}
}
标签:
element-plus
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
2022-12-08 uniapp中的@tap和@click的区别
2022-12-08 javascript如何将Unicode字符串拆分为JavaScript中的字符
2022-12-08 uniCloud的简单使用