首页 > 其他分享 >el-collapse 组件回车键会触发显隐,如何去掉回车出发显隐

el-collapse 组件回车键会触发显隐,如何去掉回车出发显隐

时间:2023-12-08 12:01:27浏览次数:34  
标签:el collapse 显隐 item activeNames 15px

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;
      }
    }
  }
}

标签:el,collapse,显隐,item,activeNames,15px
From: https://www.cnblogs.com/tn666/p/17884872.html

相关文章

  • day06 谷歌pixel刷机
    一.谷歌Pixel相关-刷机线上文档:https://zhuanlan.zhihu.com/p/598414059Pixel手机相关内容:刷机,官方包。ROOT集成charles证书本节手把手带大家完成对自己新买的Piexl手机进行刷机(Pixel所有机型通用)。刷机的意义:以后手机系统出问题,可以自如的重新刷自己喜欢的安卓系统(安......
  • element-plus中的文件上传
    官网:https://element-plus.org/zh-CN/component/upload.html简单使用:场景:与表单项一起提交,但是需要回显功能,可以用过本地url预览方式实现<!--此处需要关闭element-plus的自动上传,不需要配置action等参数只需要做前端的本地预览图片即可,无需在提交前上传图片......
  • bin、hex、axf和elf文件格式
    参考文章:https://www.eet-china.com/mp/a37431.html 在嵌入式软件开发中,bin、hex、axf和elf这四种格式的文件很常见。 bin文件bin是binary的缩写,直白的翻译即为二进制文件。bin是一种最简单的程序文件,只有程序数据。因此我们在下载bin程序文件的时候,必须要设置起始地......
  • PAVELINK.SOA-Converter新版本发布,助力SOA架构开发
    背景  随着汽车行业的不断迭代发展,市场及消费者对汽车提出了更高的要求,智能网联、自动驾驶等新技术的应用推动整车厂对车载芯片、汽车软件等方面投入了更多的精力,SOA(面向服务的架构)逐渐成为大多整车厂顺应市场趋势和技术趋势的首选。SOA架构使服务间的通讯变得更加简单,ECU更......
  • A Novel Approach Based on Bipartite Network Recommendation and KATZ Model to Pre
    ANovelApproachBasedonBipartiteNetworkRecommendationandKATZModeltoPredictPotentialMicro-DiseaseAssociationsShiruLi 1, MinzhuXie 1, XinqiuLiu 2Affiliations expandPMID: 31803235 PMCID: PMC6873782 DOI: 10.3389/fgene.2019......
  • A novel essential protein identification method based on PPI networks and gene e
    AnovelessentialproteinidentificationmethodbasedonPPInetworksandgeneexpressiondataJianchengZhong 1 2, ChaoTang 1, WeiPeng 3, MinzhuXie 1, YusuiSun 1, QiangTang 4, QiuXiao 5, JiahongYang 6Affiliations expandPMID:......
  • Paper Reading: Oversampling with Reliably Expanding Minority Class Regions for I
    目录研究动机研究背景研究目的文章贡献本文方法可靠的扩展少数类区域的过采样方法描述方法分析多分类的OREM-MOREM和Boosting的结合计算复杂度实验结果二分类数据集实验实验设置对比实验消融实验调参实验多分类数据集实验对比实验消融实验OREMBoost实验实验设置对比实验优点......
  • JavaWeb - Day03 - Ajax、前端工程化、Element
    01.Ajax-介绍Ajax概念:AsynchronousJavaScriptAndXML,异步的JavaScript和XML。作用:数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等......
  • Predicting gene expression from histone modifications with self-attention based
    Predictinggeneexpressionfromhistonemodificationswithself-attentionbasedneuralnetworksandtransferlearningYuchiChen 1, MinzhuXie 1, JieWen 1Affiliations expandPMID: 36588793 PMCID: PMC9797047 DOI: 10.3389/fgene.2022.1081......
  • Drug response prediction using graph representation learning and Laplacian featu
    DrugresponsepredictionusinggraphrepresentationlearningandLaplacianfeatureselectionMinzhuXie 1 2, XiaowenLei 3, JianchenZhong 3, JianxingOuyang 3, GuijingLi 3Affiliations expandPMID: 36494630 PMCID: PMC9733001 DOI: ......