页面tabs选项与dropdown下拉选项互相切换功能实现

页神建辑-思而后学

于 2020-11-26 22:04:27 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： web html

本文链接：https://blog.csdn.net/weixin_41993525/article/details/110201487

版权

本文介绍了如何在Vue项目中利用Element UI的el-tabs和el-dropdown组件，实现在页面上选项间的动态切换。功能描述：当dropdown选中某项，该选项会移到tabs首位，同时tabs末尾的选项移至dropdown。通过数组操作维持两者之间六个选项的平衡。

摘要由CSDN通过智能技术生成

在这里插入图片描述

功能描述：

tabs选项显式出现在页面中，当dropdown下拉选中某一项后，该选中项出现在tabs选项第一位，同时该项从dropdown下拉选项内消失，tabs选项最后一位消失，出现于dropdown下拉选项内，如此循环，让六个选项中，始终有三个选项在tabs选项内出现供选择使用，有三个选项隐藏于dropdown下拉选项内，当需要时可选择放到tabs选项内。

组件使用

案例使用基于vue的element组件库。

涉及组件：

el-tabs el-dropdown

<el-dropdown placement="bottom-start" @command="handleCommand">
	<span class="el-dropdown-link">更多<i class="***-icon"></i></span>
	<el-dropdown-menu slot="dropdown">
		<el-dropdown-item v-for="(item,index) in dropItems" :key="index" :icon="item.icon" :disabled="item.disabled" :command="{
   
                      num: item.num,
                      leftIcon: item.leftIcon,
                      name:item.name,
                      alias: item.alias,
                      numStatus: item.numStatus,