【Element Plus】自定义Select组件下拉框内容

3,365 阅读1分钟

问题

描述

有个需求是希望在下拉框中插入一个tree组件。但在实际开发过程中,要么树组件只能出现在 Option 组件的一行中,要么就无法展示,这是为什么呢?

文档

在文档中,Select组件的插槽有三个

其中,在下拉框中的有两个,一个是默认插槽,一个是自定义无数据时的插槽。默认插槽标注了子标签Option。

排查

自定义插槽有三种情况:

  1. Option 组件中包含自定义内容。例如官方示例的自定义模板。这样的话,所有自定义内容都会出现在下拉列表的一行中。
<el-select >
  <el-option>
    <span>测试</span>
  </el-option>
</el-select>
  1. 自定义内容中包含了 Option 组件。 表现也没问题,都能渲染出来,所见即所得。
<el-select >
  <div v-for="item in options" :key="item.value">
    <span>测试</span>
    <el-option :label="item.label" :value="item.value" />
  </div>
</el-select>
  1. 自定义内容中不包含 Option 组件。会丢失自定义内容,展示无数据的样式。
<el-select >
  <div v-for="item in options" :key="item.value">
    {{item}}
  </div>
</el-select>

源码

查看源码发现,下拉框由两部分组成。上面是下拉框中列表的内容,下面是无数据时展示的内容。可以看到,展示哪一部分的重要判断依据是 option 的 size。

解决

在 Select 的插槽中写一个 空的 Option 组件,并隐藏。

<el-select>
  <!-- 隐藏的option组件用来通过判断,展示下面的插槽 -->
  <el-option v-if="data.length !== 0" :style="{ display: 'none' }" />
  <!-- 实际要插入下拉框中的内容 -->
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
</el-select>

注意: 当列表数据为空时,为了展示 无数据的样式,需要删除掉 Option 组件, 使用 v-if 来控制 Option 组件。

效果

在Select下拉框中插入一个 树组件 或者 全选组件