详解vuejs2.0 select 动态绑定下拉框支持多选

select 下拉选择

产品类型：这一项是select 涉及到父子组件信息传递 下面拆开讲解

父组件

 
    
     产品类型：
    
    
     
    
   

:selections=”buyTypes” 传入子组件 在子组件 接收这个参数

@on-change=”onParamChange(‘buyType', $event)” 通过这个事件 接收 子组件传入 的参数

子组件

.selection-component {
 position: relative;
 display: inline-block;
}
.selection-show {
 border: 1px solid #e3e3e3;
 padding: 0 20px 0 10px;
 display: inline-block;
 position: relative;
 cursor: pointer;
 height: 25px;
 line-height: 25px;
 border-radius: 3px;
 background: #fff;
}
.selection-show .arrow {
 display: inline-block;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-top: 5px solid #e3e3e3;
 width: 0;
 height: 0;
 margin-top: -1px;
 margin-left: 6px;
 margin-right: -14px;
 vertical-align: middle;
}
.selection-list {
 display: inline-block;
 position: absolute;
 left: 0;
 top: 25px;
 width: 100%;
 background: #fff;
 border-top: 1px solid #e3e3e3;
 border-bottom: 1px solid #e3e3e3;
 z-index: 5;
}
.selection-list li {
 padding: 5px 15px 5px 10px;
 border-left: 1px solid #e3e3e3;
 border-right: 1px solid #e3e3e3;
 cursor: pointer;
 background: #fff;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;

}
.selection-list li:hover {
 background: #e3e3e3;
}

select 多选

产品版本：这一项是select 涉及到父子组件信息传递 下面拆开讲解

父组件

    
     产品版本：
    
    
     
    
   

子组件

.chooser-component {
 position: relative;
 display: inline-block;
}
.chooser-list li{
 display: inline-block;
 border: 1px solid #e3e3e3;
 height: 25px;
 line-height: 25px;
 padding: 0 8px;
 margin-right: 5px;
 border-radius: 3px;
 text-align: center;
 cursor: pointer;
}
.chooser-list li.active {
 border-color: #4fc08d;
 background: #4fc08d;
 color: #fff;
}

这里用到 lodash 因为vuejs2.0 放弃了$.remove 方法 可以通过lodash 方法解决

以上所述是小编给大家介绍的vuejs2.0 select动态绑定下拉框详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！