使用vue实现复选框单选多选
程序员文章站
2022-06-23 22:45:57
界面样式：
|
界面样式： <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('您还没有选择需要审批的成员')
}
},
|
|---|