vue表单之列表选择

Posted 2020-09-25

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;
},