使用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>
                                    
                                    
                                    <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('您还没有选择需要审批的成员')
            }
        },