首页 > 代码库 > vue表单之列表选择
vue表单之列表选择
1、单选
1.1、两个选项的单选
样式:点击按钮通过class控制选中样式
<div class="fr"> <a :class="{checked:shikanInfo.isAccompany===1}" @click="shikanInfo.isAccompany=1">是</a> <a :class="{checked:shikanInfo.isAccompany===0}" @click="shikanInfo.isAccompany=0">否</a> </div>
1.2、两个以上选项的单选
样式:通过class来控制,点击的时候,让传送的内容等于当前option.msg;
<div v-for="option in rentOptions" class="rentSelect">{{option.msg1}}
<a :class="{checkOne:option.msg == shikanInfo.currentStatus}" @click="singleSelect(option,‘shikanInfo‘,‘currentStatus‘)"></a>
</div>
//列表单选功能
singleSelect(option, key1, key2){
this[key1][key2] = option.msg;
},
2、多选
样式:class的值与当前表单的值绑定;
<li class="feature" v-for="option in otherFeatureArr">
{{option.msg}}
<div class="checkboxlabel">
<input type="checkbox" :id="option.id" v-model="option.result">
<label :for="option.id" :class="{checkMore:option.result}"></label>
</div>
</li>
3、全选与单选相互控制
样式:class的值与当前表单的值绑定,将png图覆盖在input上;
<div class="allDay">工作日
<div class="checkboxlabel">
<input type="checkbox" v-model="workdayAllSelected" id="workdayAll">
<label for="workdayAll" :class="{checkMore:workdayAllSelected}"></label>
</div>
</div>
<div class="timeBox" v-show="workdayOptionsShow">
<ul>
<li v-for="option in timeOptions.workdayOptions">{{option.msg}}
<div class="checkboxlabel">
<input type="checkbox" v-model="option.result" :id="option.id">
<label :for="option.id" :class="{checkMore:option.result}"></label>
</div>
</li>
</ul>
</div>
利用computed的get与set来控制全选与单选,类似购物车功能。
//computed
workdayAllSelected: {
get(){
return this.dealChkbox(‘workdayOptions‘, ‘workdayOptionsShow‘);
},
set(val){
this.timeOptions.workdayOptions.forEach(item => { item.result = val });
}
},
//methods
dealChkbox(dataKey, key) {
var t = this.timeOptions[dataKey].filter(item => { return item.result === false });
this[key] = t && t.length !== 3;
return t.length > 0 ? false : true;
},
vue表单之列表选择
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。