在Excel中实现多级联动菜单

本文详细介绍了如何在Excel中构建一个三级联动的下拉选择框,从准备字典项,去除空格,到创建一级、二级、三级下拉框,并通过数据验证和INDIRECT函数实现各级联动。操作包括全选字典项,创建首行,设置数据验证条件以及填充其他单元格。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文以省份、城市、区县为例,建立三级联动下拉框步骤如下, 供各位参考。

1.第一步要准备好下拉框的字典项,可以参考以下形式:

在这里插入图片描述

2.第二步按住键盘的Ctrl键,用鼠标全选所有的字典项。

在这里插入图片描述
注:如果字典项中有空格,可以先去掉,避免下拉框中有空格

去掉空格方式如下:

(1)全选后,按Ctrl+G,点击【定位条件】;**在这里插入图片描述**
(2)在弹窗选择【常量】然后点击【确认】
在这里插入图片描述
(3)确认完成后筛选内容如下
在这里插入图片描述

3.字典项选择完成后,点击顶部菜单栏【公式】,找到【根据所选内容创建】点击,弹窗出来后点击【首行】,最后点击【确认】。

在这里插入图片描述

4.完成前面设置之后,开始建立多级联动菜单,首先做一级下拉框。选中需要使用一级分类框(即省)的单元格,点击顶部菜单栏【数据】,找到【数据验证】点击【数据验证】,弹窗出来后验证条件中【允许(A)】选择“序列”,来源部分勾选对应的省份信息,最后点击【确定】,一级下拉框就做好了。

在这里插入图片描述

一级下拉框实际效果如下:在这里插入图片描述

5.做二级下拉框,选中需要使用二级分类框(即市)的单元格,点击顶部菜单栏【数据】,找到【数据验证】点击【数据验证】,弹窗出来后验证条件中【允许(A)】选择“序列”,来源部分=INDIRECT($K3)(在括号里选第一级分类对应的单元格(K3),一般选中后为“$K$3”,可去掉公式中的第二个美元符号变为“$K3”),最后点击【确定】按钮,二级下拉框及就做好了。

在这里插入图片描述

二级下拉框实际效果如下:

在这里插入图片描述

6.做三级下拉框,选中需要使用三级分类框(即区)的单元格,点击顶部菜单栏【数据】,找到【数据验证】点击【数据验证】,弹窗出来后验证条件中【允许(A)】选择“序列”,来源部分=INDIRECT($L3)(在括号里选第二级分类对应的单元格(L3),同样去掉第二个美元符号变为“$L3”),最后点击【确定】按钮,三级下拉框及就做好了。

在这里插入图片描述

三级下拉框实际效果如下:

在这里插入图片描述

7.三级下拉框做好后,可以选中三个下拉框,鼠标移动至右下角出现“+”标识实,下拉或双击可填充其余单元格。

在这里插入图片描述

填充后效果如下:

在这里插入图片描述

在 Element UI 中实现多级右键菜单可以通过自定义指令和事件监听来实现。下面是一个简单的示例: 首先,你需要创建一个自定义指令来监听鼠标右键事件,并在触发时显示菜单。可以在 `main.js` 文件中注册该指令: ```javascript import Vue from 'vue' import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui' Vue.directive('contextmenu', { bind: function (el, binding, vnode) { el.addEventListener('contextmenu', function (event) { event.preventDefault() const dropdown = new Vue({ render: h => { return h(Dropdown, { props: { trigger: 'manual' }, on: { command: command => { vnode.context.$emit('command', command) dropdown.$destroy() } } }, [ h(DropdownMenu, null, binding.value.map(item => { return h(DropdownItem, { props: { command: item.command }, domProps: { innerHTML: item.label } }) })) ]) }, mounted() { this.$refs.dropdown.$el.style.position = 'fixed' this.$refs.dropdown.$el.style.left = `${event.clientX}px` this.$refs.dropdown.$el.style.top = `${event.clientY}px` this.$refs.dropdown.show() }, destroyed() { this.$refs.dropdown.hide() } }).$mount() document.body.appendChild(dropdown.$el) }) } }) ``` 然后,在你需要使用右键菜单的组件中,使用 `v-contextmenu` 指令来绑定右键菜单的内容和事件: ```html <template> <div v-contextmenu="contextMenuItems" @command="handleCommand"> Right click me </div> </template> <script> export default { data() { return { contextMenuItems: [ { label: 'Item 1', command: 'item1' }, { label: 'Item 2', command: 'item2' }, { label: 'Submenu', children: [ { label: 'Subitem 1', command: 'subitem1' }, { label: 'Subitem 2', command: 'subitem2' } ] } ] } }, methods: { handleCommand(command) { console.log('Command:', command) } } } </script> ``` 在这个例子中,右键菜单的内容由 `contextMenuItems` 数组定义,每个菜单项包括 `label` 和 `command` 两个属性。当菜单项被点击时,将会触发 `@command` 事件,并将对应的 `command` 参数传递给 `handleCommand` 方法进行处理。 通过这种方式,你可以实现多级的右键菜单。当右键点击目标元素时,菜单会在鼠标位置显示,并且可以处理菜单项的点击事件。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值