日常开发记录--elementUI中的el-select下拉框多选显示的文本内容过长导致显示溢出框外...

在Element UI中，如果el-select下拉框多选时显示的文本内容过长，可能会导致下拉框的内容溢出。为了解决这个问题，可以通过自定义下拉框的显示方式来截断并显示省略号，或者使用Tooltip组件来显示完整内容。

以下是一个简单的例子，展示如何使用Tooltip来显示完整内容：

<template>
  <el-select v-model="selectedValues" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <el-tooltip placement="top" effect="light" :disabled="isTooltipDisabled(item.label)">
        <div slot="content">{{ item.label }}</div>
        <span>{{ getLabelDisplayText(item.label) }}</span>
      </el-tooltip>
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        { value: '1', label: '一个非常长的下拉选项文本一个非常长的下拉选项文本' },
        // ...更多选项
      ]
    };
  },
  methods: {
    getLabelDisplayText(label) {
      const maxLength = 15; // 设置最大显示长度
      return label.length > maxLength ? label.slice(0, maxLength) + '...' : label;
    },
    isTooltipDisabled(label) {
      return label.length <= 18; // 如果长度小于或等于18，不使用Tooltip
    }
  }
};
</script>

在这个例子中，el-tooltip被用来显示完整的label文本，当文本长度超过预设的最大长度时（例如15个字符），则会显示省略号。如果文本长度不超过设定的阈值，则不会使用el-tooltip，以避免不必要的Tooltip渲染。