vue el-select label内容多行展示

如果 `el-select` 的 `label` 内容过长，可以通过以下两种方法来实现多行展示：

1. 使用 CSS 样式

可以为 `el-select` 组件中的 `el-input` 添加 CSS 样式，实现多行展示。例如：

<el-select v-model="selected" placeholder="请选择">
  <el-option label="这是一个很长很长很长很长很长很长很长很长很长很长的选项" value="1"></el-option>
</el-select>

<style>
  .el-select .el-input {
    white-space: normal;
    word-break: break-all;
  }
</style>

2. 使用自定义模板

可以使用 `el-select` 的 `template` 属性来自定义选项模板，以实现多行展示。例如：

<el-select v-model="selected" placeholder="请选择" :model-value="optionLabel" :option-label="optionLabel">
  <template #option="{ label, value }">
    <div class="option-item">{{ label }}</div>
  </template>
  <el-option label="这是一个很长很长很长很长很长很长很长很长很长很长的选项" value="1"></el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        selected: '',
      };
    },
    methods: {
      optionLabel(option) {
        return option.label.replace(/(.{8})/g, '$1\n');
      },
    },
  };
</script>

<style>
  .option-item {
    white-space: pre-wrap;
    word-break: break-all;
  }
</style>

在这个例子中，我们使用了 `template` 来自定义选项模板，将每个选项的 `label` 内容放在一个 `div` 中，并添加了样式 `white-space: pre-wrap; word-break: break-all;` 来实现多行展示。同时，还需要在 `el-select` 中添加 `:model-value` 和 `:option-label` 属性，来指定选项的显示内容。在本例中，我们通过 `optionLabel` 方法对每个选项的 `label` 内容进行了处理，将其每 8 个字符添加一个换行符，实现多行展示。