选择一个下拉框动态修改另一个下拉框的值,看一下效果图:
创建一个sheet存放下拉框数据,第一行的水果、蔬菜为一级菜单内容,选中数据按F5或Ctrl+G打开定位,如下图勾选后点击定位
定位作用是选中有内容的单元格
在菜单栏选择
“公式”
->
“指定”
->
“首行”(一级下拉框)
->
“确定”
点击指定左边的名称管理器或Ctrl+F3,可以看到刚刚创建的下拉框数据了。
选择第一行数据,给定一个名称如下图的
“一级下拉框”
切换到操作页面,选中要设置一级下拉框的表格(可以只选择一个单元格),菜单栏选择
数据
->
有效性
允许选择
序列
,来源填写
=xx
,xx为step3设置的一级下拉框名称
一级下拉框效果
一级下拉框随便选一个值,选中要设置二级下拉框的单元格格,设置有效性,
二级下拉框效果
注意:如果一级下拉框值为空,设置二级下拉框时会出现如下提示
$A$2:
绝对列,绝对行
$A2 :
绝对列,相对行(下拉后会变成 $A3, $A4…)
————————————————
版权声明:本文为CSDN博主「学习要趁早z」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
https://blog.csdn.net/qq_42677452/article/details/117959619
选择一个下拉框动态修改另一个下拉框的值,看一下效果图:step1 ???? :设置下拉框数据 创建一个sheet存放下拉框数据,第一行的水果、蔬菜为一级菜单内容,选中数据按F5或Ctrl+G打开定位,如下图勾选后点击定位 定位作用是选中有内容的单元格step2 ???? :设置二级下拉框 在菜单栏选择 “公式” -> “指定” -> “首行”(一级下拉框) -> “确定” 点击指定左边的名称管理器或Ctrl+F3,可以看到刚刚创建的下拉框数据了。
VLOOPUP
vlookup函数的使用方法
“Lookup”的汉语意思是“查找”,在
Excel
中与“Lookup”相关的函数有三个:VLOOKUP、HLOOKUO和LOOKUP。下面介绍VLOOKUP函数的用法。Vlookup函数的作用为在表格的首列查找指定的数据,并返回指定的数据所在行中的指定列处的数据。其标准格式为:
VLOOKUP(lookup_value,table_arr...
一级
菜单在ul列表内建立li元素并清除默认样式让所有li元素左浮动并清除浮动DOM中文档结构如下:<ul class="clearfix">
<li><a href="#">1</a></li>
<li><a href="#">2&
注:这里的名称是唯一标识,不可重复,绑定的是所选定的内容。
然后引用,引用的方式有两种,一种是直接使用=name,一种是使用=Sheet2!$A1:1:1:A4这个好理解一种是直接通过name来获取绑定的A1−A4的内容,一种就直接是A1−A4格式如上Sheetm!4
这个好理解一种是直接通过name来
Element UI提供了懒加载的功能,可以实现
二级
联动
下拉框
的懒加载。在懒加载的过程中,可以根据用户的选择
动态
加载对应的数据。
一种实现方式是在第
一级
下拉框
的单击事件中获取到第
一级
下拉框
的id值,然后遍历包含所有数据的
一级
分类集合,找到和当前选中的
一级
分类id值相等的那个对象,将其children属性赋值给第
二级
下拉框
的数据源。这样就实现了根据第
一级
下拉框
的选择
动态
加载第
二级
下拉框
的数据。\[1\]
另一种方式是在页面初始化时获取整个级联
下拉框
的数据,并将其定义为一个变量。在初始化渲染时只渲染第
一级
下拉框
,当需要加载第
二级
下拉框
的数据时,直接遍历该变量的数据,取出对应的第
二级
下拉框
的数据进行渲染,无需发送请求。这种方式可以提高效率。\[2\]
在实现过程中,可以使用Element UI提供的cascaderProps属性来配置懒加载的相关参数,如lazy和lazyLoad。lazy设置为true表示开启懒加载,lazyLoad指定一个方法来处理懒加载的逻辑。在lazyLoad方法中,根据节点的层级来判断需要加载的数据,并通过resolve方法将加载的数据返回。\[3\]
以上是关于Element UI
二级
联动
下拉框
懒加载的一些实现方式和方法。希望对你有帮助。
#### 引用[.reference_title]
- *1* [vue实现
下拉框
二级
联动
效果](https://blog.csdn.net/qq_34953053/article/details/126947498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [elementUI的级联下拉懒加载(
动态
加载)](https://blog.csdn.net/qq_45473377/article/details/119953321)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [el-cascader三级
联动
懒加载回显问题](https://blog.csdn.net/liuwenjie_/article/details/126279731)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]