vue2、element的el-select 选项框的宽度设置、文本过长问题

<el-select v-model="value" placeholder="请选择">
  <el-option
    v-for="item in cities"
    :key="item.value"
    :label="item.label"
    :value="item.value">
      <el-tooltip class="item" :content="item.label" placement="right">
	    <span>{{ item.label }}</span>
	  </el-tooltip>
  </el-option>
</el-select>

<style>
.el-select-dropdown {
  width: 100px;
}
.el-select-dropdown__item {
  width:100%;
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

data() {
  return {
    cities: [{
      value: 'Beijing',
      label: '北京北京北京北京北京北京北京'
    }, {
      value: 'Shanghai',
      label: '上海'
    }, {
      value: 'Nanjing',
      label: '南京'
    }, {
      value: 'Chengdu',
      label: '成都'
    }, {
      value: 'Shenzhen',
      label: '深圳'
    }, {
      value: 'Guangzhou',
      label: '广州'
    }],
    value: ''
  }
}

相关文章：

创建并配置华为云虚拟私有云

Flask是什么？深入解析 Flask 的设计与应用实践

基于LightGBM的集成学习算法

node.js：多线程 简单示例

Python自学 - 函数式编程初步(lambda、map、filter)

Elasticsearch与数据库数据一致性：最佳实践与解决方案

企业微信——智能表格学习

实战项目模块之1------单个按键短按切换不同工作模式

《HarmonyOS第一课》焕新升级，赋能开发者快速掌握鸿蒙应用开发

【前端系列】Pinia状态管理库

测试岗位面试常见的数据库问题及解答

gitlab高级功能之 CICD Steps

微前端Webpack集成Vite子应用避坑指南

微信小程序获取后端数据

PS4代理伺服器指南

JavaScript 基础2

【网络安全】PostMessage：分析JS实现XSS

.e01, ..., .e0n的分卷压缩包怎么解压

多目标优化算法——基于分解的多目标进化算法（MOEA-D）

[C++]vector（超详细）

Docker入门常用命令总结

软考教材重点内容 信息安全工程师 第 12 章网络安全审计技术原理与应用

牛客网刷题 ——C语言初阶——OR76 两个整数二进制位不同个数

计算效率提升 10 倍，存储成本降低 60%，灵犀科技基于 Apache Doris 建设统一数据服务平台

Swift Combine 学习（三）：Subscription和 Subscriber

React Router 用法概览