使用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('您還沒有選擇需要審批的成員')
            }
        },