Skip to content
返回

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

Share this post on:

上一篇文章
炫酷的CSS loading加载动画(拒绝废话版)
下一篇文章
Vue3、Vite5、Primevue、Oxlint、Husky9 简单快速搭建最新的Web项目模板