问题
描述
有个需求是希望在下拉框中插入一个tree组件。但在实际开发过程中,要么树组件只能出现在 Option 组件的一行中,要么就无法展示,这是为什么呢?
文档
在文档中,Select组件的插槽有三个
其中,在下拉框中的有两个,一个是默认插槽,一个是自定义无数据时的插槽。默认插槽标注了子标签Option。
排查
自定义插槽有三种情况:
- Option 组件中包含自定义内容。例如官方示例的自定义模板。这样的话,所有自定义内容都会出现在下拉列表的一行中。
<el-select >
<el-option>
<span>测试</span>
</el-option>
</el-select>
- 自定义内容中包含了 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>
- 自定义内容中不包含 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下拉框中插入一个 树组件 或者 全选组件