vue el-select 内容多行展示

在 Vue 中使用 el-select 组件时，可以通过设置 slot-scope 属性为选项项添加自定义内容，从而实现多行展示效果。

具体步骤如下：

1. 设置 el-select 的 slot-scope 属性为 option。

<el-select v-model="value" placeholder="请选择" :options="options" slot-scope="{option}">
  <!-- 自定义内容 -->
</el-select>

2. 在 el-option 中使用自定义模板。

<el-select v-model="value" placeholder="请选择" :options="options" slot-scope="{option}">
  <el-option :label="option.label" :value="option.value">
    <!-- 自定义内容 -->
  </el-option>
</el-select>

3. 编写自定义模板。

<template>
  <div>
    <div>{{ option.label }}</div>
    <div>{{ option.desc }}</div>
  </div>
</template>

完整代码示例：

<template>
  <el-select v-model="value" placeholder="请选择" :options="options" slot-scope="{option}">
    <el-option :label="option.label" :value="option.value">
      <div>
        <div>{{ option.label }}</div>
        <div>{{ option.desc }}</div>
      </div>
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: [
        { label: '选项一', value: 'one', desc: '这是选项一的描述' },
        { label: '选项二', value: 'two', desc: '这是选项二的描述' },
        { label: '选项三', value: 'three', desc: '这是选项三的描述' },
      ],
    };
  },
};
</script>