欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-07 15:33:48
界面样式:

 

界面样式:

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