当前位置: 首页 > article >正文

el-select、el-autocomplete的选项内容过长显示完整内容

问题:

el-select、el-autocomplete的选项内容过长需要看清完整内容

解决方案:

使用el-popover悬停显示完整内容

代码:

<el-form-item label="备注" prop="remark">
 <el-autocomplete v-model="form.remark" style="width: 100%" value-key="remark" :fetch-suggestions="queryRemarkSearch" clearable>
    <!-- 自定义每个建议项的显示内容 -->
    <template #default="{ item }">
      <div>
         <el-popover
            placement="top-start"
            width="600"
            trigger="hover"
            :content="item.remark">
            <div class="option-item" slot="reference">
              {{ item.remark }}
            </div>
          </el-popover>
      </div>
    </template>
  </el-autocomplete>
 </el-form-item>

<el-form-item label="备注" prop="remark">
	<el-select v-model="form.remark" style="width: 100%" @focus="setOptionWidth" filterable clearable >
	  <el-option v-for="item in remarkList" :key="item.id" :label="item.remark" :value="item.id"  :style="{width:selectOptionWidth,'min-width': '350px'}">
	    <el-popover
	      placement="top-start"
	      width="600"
	      trigger="hover"
	      :content="item.remark">
	      <div class="option-item" slot="reference">
	        {{ item.remark }}
	      </div>
	    </el-popover>
	  </el-option>
	</el-select>
</el-form-item>



setOptionWidth:function(event){
	// 下拉框弹出时,设置弹框的宽度
   this.selectOptionWidth = event.srcElement.offsetWidth + 'px'
},

效果展示:

在这里插入图片描述


http://www.kler.cn/a/372985.html

相关文章:

  • Flutter鸿蒙next 封装 Dio 网络请求详解:登录身份验证与免登录缓存
  • [前端][基础]JavaScript
  • fastGpt
  • Apache Hive分布式容错数据仓库系统
  • 大模型,多模态大模型面试【LoRA,分类,动静态数据类型,DDPM,ControlNet,IP-Adapter, Stable Diffusion】
  • js 通过filter 实现扁平化数据tree
  • 【Linux】动态库、静态库
  • 学习笔记:黑马程序员JavaWeb开发教程(2024.10.30)
  • 《模拟电子技术基础》第六版PDF课后题答案详解
  • 2024年道路运输安全员考试题库及答案
  • 海外云手机是什么?对外贸电商有什么帮助?
  • Java程序设计:spring boot(13)——全局异常与事务控制
  • git回滚到指定的提交
  • 群控系统服务端开发模式-应用开发-安装及提交仓库
  • TIA 中用 GSD 方式组态 ET200SP 安全模块时如何用 S7-FCT 分配安全目标地址
  • python2升python3踩坑纪
  • C++设计模式创建型模式———原型模式
  • Java如何实现PDF转高质量图片
  • 400元左右的头戴式耳机什么牌子好用?2024推荐四款好用高性价比型号
  • wordpress的functions文件非常重要 一定要懂它
  • JavaScript 超大量if-else判断如何优化(设计思路)
  • C语言——八股文(笔试面试题)
  • 大模型中的token是什么;常见大语言模型的 token 情况
  • 基于 Gitee AI数据集实现弹幕不遮挡人像滚动
  • Leetcode224 -- 基本计算器及其拓展
  • Spring学习笔记_17——@Primary