当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用vue实现复选框单选多选

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

2020年01月06日  | 移动技术网IT编程  | 我要评论

 

界面样式：

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网