使用vue实现复选框单选多选

 

界面样式：

 <div class="right_con" v-if="isClickApply" style="border:none">                    <table class="work-table base-table">                        <thead>                            <tr>                                <th>                                    <Checkbox v-model="hasAllChecked" @on-change="chooseAll"></Checkbox>                                </th>                                <th style="text-align:left;width:30%">姓名</th>                                <th style="width:30%">手机号码</th>                                <th style="width:30%">申请时间</th>                                <th style="width:10%">操作</th>                            </tr>                        </thead>                        <tbody v-if="applyUserList&&applyUserList.length>0">                            <tr v-for="(item,index) in applyUserList" :key="index">                                <td>                                    <Checkbox                                        v-model="item.hasSelected"                                        @on-change="chooseSingle(item)"                                    ></Checkbox>                                </td>                                <td>{{item.trueName}}</td>                                <td>{{item.phone}}</td>                                <td>{{item.addTime}}</td>                                <td style="display:flex;aligin-items:center">                                    <Button class="agree" @click="agreeClick([item.id])">通过</Button>                                    <!-- <div class="agree" @click="agreeClick([item.id])">通过</div> -->                                    <!-- <div class="disagree" @click="disagreeClick([item.id])">驳回</div> -->                                    <Button class="disagree" @click="disagreeClick([item.id])">驳回</Button>                                </td>                            </tr>                        </tbody>                        <tbody v-else>                            <tr style="text-align: center;">                                <td colspan="5">暂无数据</td>                            </tr>                        </tbody>                    </table>                    <Page                        show-total                        :total="total"                        :page-size="size"                        :current="current"                        @on-change="changePage"                        class="page_switch_class"                        v-if="applyUserList&&applyUserList.length>0"                    />                </div>

关键参数：

hasAllChecked（是否全选） 

全选方法：

 // 全选        chooseAll(val) {            var self = this            if (val) {                self.applyUserList.forEach(ele => {                    ele.hasSelected = true                })            } else {                self.applyUserList.forEach(ele => {                    ele.hasSelected = false                })            }        },

解释：遍历要显示的数组，手动为每一项增加hasSelected参数，点击全选时，将所有参数中hasSelected置为true，反之亦然。

单选方法：

  // 单选        chooseSingle(item) {            var self = this            self.hasAllChecked = true            self.applyUserList.forEach(ele => {                if (!ele.hasSelected) self.hasAllChecked = false            })        },

解释：先将代表全选的hasSelected置为true，遍历要显示的数组，若数组中有已被选中的项，则将hasSelected置为false，代表非全选。

 批量通过：

  // 批量通过        agreeAll() {            var self = this            var isSelected = false            self.applyUserList.forEach(ele => {                if (ele.hasSelected) isSelected = true            })            if (isSelected) {                var members = []                self.applyUserList.forEach(ele => {                    if (ele.hasSelected) members.push(ele.id)                })                self.agreeClick(members)            } else {                self.$app.error('您还没有选择需要审批的成员')            }        },

批量驳回：

   // 批量驳回        disagreeAll() {            var self = this            var isSelected = false            self.rejectIds = []            self.applyUserList.forEach(ele => {                if (ele.hasSelected) isSelected = true            })            if (isSelected) {                self.applyUserList.forEach(ele => {                    if (ele.hasSelected) self.rejectIds.push(ele.id)                })                self.title =                    self.rejectIds.length > 1 ? '批量驳回原因' : '驳回原因'                self.rejectReason = ''                self.modal12 = true            } else {                self.$app.error('您还没有选择需要审批的成员')            }        },