本人学生 , 平时在外面没事接点小项目小赚一笔补贴生活费. 之前一直都是使用 Vue2.x 的版本做项目, 暑假刚刚学习了 Vue3 想着新项目就直接用 Vue3 上手.
好了, 话不多说先给大佬们看看效果样式:
因为下拉框可能会在某些情况下被挡住, 所以这里的下拉框被挂载到了 body 标签上, 并且下拉框中的选项往往是以 <slot>插槽的形式编写, 这里就会困扰到很多小白, 搞不明白怎么样才能在 下拉框 与 触发下拉按钮 之间关联响应式事件与数据.
tk-select 为 select 下选项父标签, 必须含有插槽 #selectDropDown 才能正常使用
tk-select-item 为**select
**下选项子标签(选项标签), tk-select-item 内可以继续写入其他 HTML 内容, 每项的具体值由props value 决定
可以使用 v-modal 实时获取到 下拉选项 选取到的值
首先看看目录结构
两个 .vue 文件用来的干嘛的没什么好说的, selectBus.js 解决 Vue3 中无法安装 eventBus 的问题, token.js 用于给每组 selec t 与 select-item 相互绑定.
我们先看看 vue3 官网怎么说的 进入官网 . 说人话的意思就是不可以像 vue2 那样愉快的安装 Bus , 需要 自己实现事件接口 或者使用 第三方插件 . 这里官网也给出了具体实现方案.
vue3 新增 <teleport> 标签, 可以将标签内的元素挂载到任意位置, 查看官方文档
select 主要有触发下拉按钮 tk-select-button 和下拉列表 tk-select-dropdown 组成, 下拉框中的选项未来将由插槽插入.
首先解决下拉列表打开&关闭和定位的问题
在 select.vue 中接收事件
到这里下拉选项框基本就完成了. 我们像页面添加第一个下拉选项时非常完美,但是如果页面上有两个 select 存在时问题来了. 我们发现当控制其中一个选项被选中是, 另外一个 select 显示的值也随之改变. 我们需要将一组 select & select-item 进行绑定,让 Bus 在接受时知道事件来自于哪个里面的 select-item .
在 vue2 中我们通常获取实例的 parent 然后一层一层寻找父类 select , 但是在 vue3 setup 中并不能获取到正确的 parent , 所以我想到了可以在 select 创建时派发一个 token 在讲此令牌传给所有子类, 好了理论存在, 开始实践.
在vue中使用 provide 可以向子类、孙类等等后代传输数据, 后代使用 inject 接收数据. 查看官网
这里可以模仿Java中的UUID
在 select 创建时生成 token 并派发给后代
这样我们在子类接收后每次使用 bus 发送数据时带上 token
在 select.vue 监听Bus后先验证token
github.com/18651440358/vue3-select
第一次写帖子几分激动几分不知所措, 请各位大佬指点错误或可以优化的地方, 欢迎大家讨论.
选择你要设置的单元格，数据--有效性，弹出“数据有效性”对话框--设置，“有效性条件”中“允许”选择“序列”，在“来源”处输入你想要在下拉列表中显示的“默认值”，两个值之间用英文状态下的逗号隔开，确定即可(也可引用一些单元格的数据为“默认值”)。实际项目中我们获取选择的数据的id；这时候需要配合使用v-bind，才能获取到选择的那条数据的id值，其实就是id赋值给value属性
<template>
<div>
<select
v-model="select"
>
<option
v-for="(a,index)
in
arr"
:key="index"
:value="a.id">{{
a.name
}}</option>
</select>
<p>您选择的名字的Id是：{{select}}</p>
</div>
</template>
js代码
<script>
export
default
{
data(){
return{
select:'',
arr:[
{id:'1',name:'html'},
{id:'2',name:'css'},
{id:'3',name:'js'},
]
}
}
}
</script>
拓展知识：vue获取id以及重定向路由方法
1.获取ID的方法：
let
orderId=this.$route.query.id
2.路由重定向方法
this.$router.push(this.$route.query.redirect
||
'/login')
以上这篇vue操作下拉选择器获取选择的数据的id方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:Vue.js获取被选择的option的value和text值方法vue如何通过id从列表页跳转到对应的详情页vue实现在表格里,取每行的id的方法
