使用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('您尚未选择须要审批的成员')
            }
        },