时间:2021-05-26
html部分:v-for循环出的结构
<div > <p @click="clickSize (item, index)">{{item.name}}</p> <transition name="opacityLeave"> <div class="condition-list" v-show="isShowSize && index == i"> <div class="size-wrap" v-if="item.RingSize"> <p class="size" :class="{'active':item1.active}" :key="index1" v-for="(item1, index1) in item.RingSize" @click="getSize (item, item1) ">{{item1.AttrValueName}}</p> </div> </div> </transition></div>js部分:
data() { return { isShowSize: false, i: -1 }; },//实现点击哪个下拉框显示 clickSize (item, index) { this.i = index; this.isShowSize = !this.isShowSize; },//实现选取下拉值 getSize (item, item1) { this.item.name = item1.AttrValueName; this.isShowSize = !this.isShowSize; },下面看下vue--select组件的使用与禁用
业务:消息推送方式有两种,为“微信”和“邮件”,微信发送时需要选择“要发送的应用程序”,邮件发送时不需要
微信发送时,页面如下:
邮件发送时,选择器不可用,页面如下:
虽然官网上没有给出具体的例子,但可从属性中查到 “disabled”属性,
属性 说明 类型 默认值 disabled 是否禁用 Boolean false
实现:
添加disabled属性,写成如下红色标记格式;定义一个isAble变量,用来存放TRUE和FALSE值,决定此选择框是否可用。
<Select <span style="color: rgb(255, 0, 0);">v-bind:disabled="isAble" </span>clearable v-model="dataAgentEntity.ID" style="width:240px"> <Option v-for="item in dataAgent" :value="item.ID" :key="item.ID">{{ item.name }}</Option> </Select> export default { data(){ return{ isAble: false,//select下拉框是否可用 } }然后就是逻辑中操作变量isAble的值,改变组件的可用禁用状态了
methods:{ Test(){ var vm = this; if (vm.alertType == '邮件') { vm.isAble = true; //不可用 } } }test方法中只写了判断不可用,改回微信时,还要变成可用状态,不然又埋了个bug,哈哈。不过这是业务逻辑了,只介绍方法,记个笔记,具体视情况而定。
以上所述是小编给大家介绍的vue 不使用select实现下拉框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
利用BootstrapMultiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值首先展示项目案例:多选下拉框功能实现.gi
本文实例讲述了js实现Select下拉框具有输入功能的方法。分享给大家供大家参考。具体实现方法如下:实现方法一复制代码代码如下:js实现可输入的下拉框德国挪威瑞
项目中经常会遇到下拉框,在扁平化和响应式布局大行其道的今天,使用jQuery来实现下拉框就十分的必要了,而且也会美观很多,这里就给大家推荐一段基于jQuery的
一、开发小要点web页面中,我们一般不用select、option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大
本文实例为大家分享了bootstrap实现下拉框搜索展示的具体代码,供大家参考,具体内容如下1.第一个下拉框代码请选择数据资源${entity.alias!}$