vue 下拉框多选,vue实现下拉框查询
本文主要介绍了vue下拉列表的两种实现方法的比较，具有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
vue下拉列表的两种实现
第一种采用v-for的方式
El-select v-model= form . column type placeholder= field type
el-option v-for=(item，index)in column pearr :key= index :label= item . label :value= item . value
/el选项
/el-select
这样，就需要在数据中定义columeTypeArr，如下所示
data(){
返回{
列标题：[{
值：“字符串”，
标签:“字符串”
},{
值： Int ，
标签:“整数”，
},{
值：“十进制”，
标签:“数字”
}],
}
}
第二种采用写死的方式
直接在select下写dead。
El-select v-model= form . fileorgtype placeholder=请选择
El选项标签=是值=是/el选项
El选项标签=否值=N/el选项
/el-select
两种方式的比较：
两种方法都差不多，只是第一种方法需要在数据中配置，当数据需要从后台回显时，明显比第一种方法好。
对于参数较少的简单下拉列表，第二种显然更占优势。
vue下拉菜单组件的实现
我们一起来实现一个vue的下拉菜单组件。
网上已经有很多基础的UI组件了，为什么还要自己实现呢？其实我并没有反复造轮子的意思，只是想通过这个过程回顾一下vue组件开发的一些细节和注意事项。
为什么选择下拉菜单组件？
因为：Sparrow虽然小而全，但是这个小组件涉及了很多vue组件开发的知识点。
好了，我们开始吧！
首先，创建一个vue-cli项目。作者用的是vue-cli3，创作过程简短。然后创建一个vue组件：DropDownList.vue
在写模板之前，我们先分析一下这个组件的视图结构和功能。
下拉菜单组件应该由两部分组成：
所选项目的文本
要选择的菜单(默认隐藏)
它的主要功能包括：
鼠标经过下拉菜单组件，显示要选择的菜单。
滑出下拉菜单组件以隐藏要选择的菜单。
在要选择的菜单项目上单击鼠标，选择要更新文本的项目，组件将发送change事件。
我们编写如下这样的模板：
模板
div class= zq-drop-list @ mouse over= onDplOver($ event) @ mouse out= onDplOut($ event)
所选项目的文本i/i/span
保险商实验所
李北京/李
上海/李
广州/李
/ul
/div
/模板
选择项目文本右侧的I标签，实现下拉菜单的三角形图标。在下面的css中，我们使用背景图片来实现它。
我们添加了回调函数，用于鼠标传递和滑出根元素div。具体实现见下文。
接下来，我们为这个下拉菜单编写一个样式，并在模板的底部添加一个样式标签。为了防止与其他组件的样式冲突，我建议您在开发组件时将scoped属性添加到样式中。另外，作者在这里使用了scss，具体代码如下：
样式范围的语言=scss 。zq-下拉列表{
显示：内嵌-块；
最小宽度：100像素；
位置：相对；
跨度{
显示：块；
高度：30px
行高：30px
背景：# f1f1f1
字体大小：14px
文本对齐：居中；
颜色：# 333333；
边框-半径：4px
我{
背景：URL(https://www . easyicon . net/API/resize API . PHP？id=1189852size=16)不重复居中居中；
左边距：6px
显示：内嵌-块；
}
}
ul{
位置：绝对；
顶配：30px
左：0；
宽度：100%；
边距：0；
填充：0；
边框：纯色1px # f1f1f1
边框-半径：4px
溢出：隐藏；
李{
列表样式：无；
高度：30px
行高：30px
字体大小：14px
border-bottom:solid 1px # f1 f1 f1；
背景：# ffffff
}
李：最后一个孩子
边框-底部：无；
}
李：盘旋{
背景：# f6f6f6
}
}
}
/风格
关于风格，这里就不详细展开了，只说几点需要注意的地方：
I元素的样式我用了一张网络图，你可以自己改。
待选菜单ul并没有隐藏在css中，因为我们要通过js来控制它。具体原因见下文。
待选菜单ul使用绝对定位，因为当它被展开时，它不应该影响页面上其他元素的布局。
现在这个组件大概长这个样子：
让我们继续定义这个组件的属性。很明显，要选择的菜单应该作为属性传入，一定不能内部编写。这些属性定义如下：
脚本
导出默认值{
名称： DropDownList ，
道具：{
数据列表：{
类型：数组，
默认(){
返回[
{name:选项一 }，
{名称：选项二 }
]
}
},
标签属性：{
类型：字符串，
default(){ return name }
}
},
data(){
返回{
activeIndex:0
}
},
}
DataList是要选择的菜单的数据源属性。在这里，我们为这个属性定义默认值，这也是我建议你养成的习惯。作为一个组件，最好有默认值，因为别人使用你的组件时，不用先设置相关属性，就能看到一个成品的效果，并能快速查看你的组件所需属性的数据细节。
另一个属性是labelProperty。这个属性的作用是什么？我们实际项目中的数据源并不总是包含字段名，这可能会导致下拉菜单无法呈现数据文本，所以我们定义这个属性来指定实际数据源呈现文本的字段，它必须是一个字符串。该属性的默认值是name，因为它需要与默认数据源一致。相信你也看到了一个组件内部数据，activeIndex，用来表示当前选中项的索引，我们后面会用到。
现在我们可以在其他地方引入和使用这个组件。虽然还没有完成，但我们不妨先把它展示在界面上：
模板
div class=home
drop list:dataList= DP list label property= city @ change= ondp change($ event)/drop list
p其他文本内容/p
/div
/模板
脚本
从“@/components/DropDownList.vue”导入下拉列表
//其他代码省略。
/脚本
该页面介绍并使用我们的DropDownList组件。dataList=dplist 将当前页的dplist数组绑定到组件的dataList属性。该数组中的对象有一个city字段，我们希望在下拉菜单中显示该字段，因此我们将组件的labelProperty设置为city。我们还注册了该组件的变更事件，该事件需要在该组件内部进行调度。见下文。
现在我们回到组件的模板部分，发现它仍然是静态内容。我们修改这些静态内容，通过属性来呈现。
模板
div class= zq-drop-list @ mouse over= onDplOver($ event) @ mouse out= onDplOut($ event)
span{{dplLable}}i/i/span
保险商实验所
li v-for=(item，index)in dataList :key= index @ click= onli click(index，$ event) { { item[label property]} }/Li
/ul
/div
/模板
要选择的菜单li的文本是项目[labelProperty],以便可以正确显示开发者指定的字段。
我们来看看选中项的文本表达式：dplLabel。我们不定义这个属性或者这个内部数据。它从哪里来？选中项的文本应该是datalist[active index][label property](这个比较好理解，有问题请留言)，但是这个表达式太长了，不能写在模板里，不利于维护。让我们把它写入计算的属性。
计算值：{
dplLable(){
返回this . datalist[this . active index][this . label property]
}
}
所以才有上面的dplLabel，计算属性真的很有用。
现在我们已经完成了下拉菜单的视图和数据关联部分，接下来我们将实现它的功能。
第一步是隐藏默认选择的菜单。为什么我们不在这里直接用display:none of css，然后在鼠标经过时显示：block？正因为如此，我们点击时无法隐藏菜单项，体验不好。我们用js来控制，但是vue不支持直接访问dom元素。如果我们想在组件初始化的时候访问dom元素，有一个最方便的方法，就是自定义指令。
我们使用以下代码为下拉菜单组件添加本地自定义指令：
指令：{
dpl:{
绑定(el){
El . style . display= none ；
}
}
},
这个dpl是自定义命令，请忽略我笨拙的命名！然后在自定义指令的hook函数bind方法中，我们访问el元素并控制其样式属性显示：none最后，将这个自定义指令添加到模板中的ul标签。别忘了加上v-。现在看效果。要选择的菜单已被隐藏。
ul v-dpl
我们使用自定义指令钩子函数来访问dom元素，实现了对dom的控制，非常实用！
让我们继续监控一开始为下拉菜单定义的鼠标通过和滑出，实现待选菜单的显示和隐藏。
onDplOver(事件){
let ul=event . current target . child nodes[1]；
ul . style . display= block ；
},
onDplOut(事件){
let ul=event . current target . child nodes[1]；
ul . style . display= none ；
},
在鼠标事件中，我们访问事件的currentTarget对象，为什么不是Target？因为下拉菜单的子元素也会触发这个事件，如果我们访问target，它可能不是我们预期的顶级元素。
最后，我们实现了要选择的菜单项的点击事件。点击后，待选菜单被隐藏，内部状态被修改，change事件被分发。
onLiClick(索引){
path=event . path (event . composed path event . composed path())//兼容Firefox和safari
path[1]. style . display= none ；
this.activeIndex=index
这个。$emit(change ，{
索引：索引，
值：this.dataList[index]
})
}
这里有一个细节需要注意。我们必须通过li元素找到外部的ul元素，但是path不支持Firefox和safari。好在这两个浏览器都支持composedPath，所以第一行代码就有了兼容的写法。然后，通过修改内部数据activeIndex来更新所选项目的文本。最后，调用emit方法将change事件发送到父元素。别忘了把事件对象打包发出去。
完整的代码如下：
模板
div class= zq-drop-list @ mouse over= onDplOver($ event) @ mouse out= onDplOut($ event)
span{{dplLable}}i/i/span
ul v-dpl
li v-for=(item，index)in dataList :key= index @ click= onli click(index，$ event) { { item[label property]} }/Li
/ul
/div
/模板
脚本
导出默认值{
名称： DropDownList ，
data(){
返回{
activeIndex:0
}
},
道具：{
数据列表：{
类型：数组，
默认(){
返回[
{name:选项一 }，
{名称：选项二 }
]
}
},
标签属性：{
类型：字符串，
default(){ return name }
}
},
指令：{
dpl:{
绑定(el){
El . style . display= none ；
}
}
},
方法：{
onDplOver(事件){
let ul=event . current target . child nodes[1]；
ul . style . display= block ；
},
onDplOut(事件){
let ul=event . current target . child nodes[1]；
ul . style . display= none ；
},
onLiClick(索引){
设路径=事件。路径 (事件。合成路径事件。合成路径())//兼容火狐和旅行队
路径[1]。风格。display= none
this.activeIndex=index
这个$emit(change ，{
索引：索引，
值：this.dataList[index]
})
}
},
计算值：{
dplLable(){
返回这个。数据表[这个。主动索引】【这个。标签属性]
}
}
}
/脚本
样式范围的语言=scss 。zq-下拉列表{
显示：内嵌-块；
最小宽度：100像素；
位置：相对；
跨度{
显示：块；
高度：30px
行高：30px
背景：# f1f1f1
字体大小：14px
文本对齐：居中；
颜色：# 333333;
边框-半径：4px
我{
背景：网址(https://www。easyicon。net/API/resize API。PHP？id=1189852size=16)不重复居中居中；
左边距：6px
显示：内嵌-块；
}
}
ul{
位置：绝对；
顶配：30px
左：0;
宽度：100%;
边距：0;
填充：0;
边框：纯色1px # f1f1f1
边框-半径：4px
溢出：隐藏；
李{
列表样式：无；
高度：30px
行高：30px
字体大小：14px
边框-底部：实心1px # f1 f1 f1
背景：# ffffff
}
李：最后一个孩子
边框-底部：无；
}
李：盘旋{
背景：# f6f6f6
}
}
}
/风格
以上为大家展示了某视频剪辑软件如何实现一个下拉菜单组件，虽然比较简单，但也基本涉及到了组件开发常用的一些特性。希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。