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