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

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

article 2025/3/2 3:24:26

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