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

最新推荐文章于 2025-02-18 15:20:34 发布

原创最新推荐文章于 2025-02-18 15:20:34 发布 · 1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

问题：

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'
},