spring boot使用vue技术,实现全选功能
全选按钮
<tr>
<td colspan="8">
姓名 <input type="text" name="name" v-model="like.name">
班级:
<select v-model="like.sid">
<option v-for="(v,index) in classes":value="v.cid">{{v.cname}}</option>
</select>
电话:<input type="text" name="telephone" v-model="like.telephone">
<button v-on:click="findName()">查询</button>
</td>
</tr>
<tr>
<td>
序列号码
<button @click="checkAll" v-model="checked">全选</button>
</td>
<td>客户姓名</td>
<td>客户性别</td>
<td>身份证号</td>
<td>开户时间</td>
<td>客户电话</td>
<td>客户单位</td>
<td>数据操作</td>
</tr>
<tr v-for="(item,index) in list">
<td>
<input type="checkbox" v-model="checkModel" :value="item.id">
</td>
<td>{{item.name}}</td>
<td>
<div v-if="item.sex==1">
男
</div>
<div v-else>
女
</div>
</td>
<td>{{item.card}}</td>
<td>{{item.birthday}}</td>
<td>{{item.telephone}}</td>
<td>{{item.classes.cname}}</td>
<td>
<button v-on:click="del(item.id,index)">删除</button>
<button v-on:click="update(item.id)">修改</button>
</td>
</tr>
vue代码
<script type="text/javascript">
var vm=new Vue({
el: "#root",
data: {
checked:false, //是否全选
checkModel:[] //双向数据绑定的数组,我是用的id
},
watch:{
checkModel(){
if(this.checkModel.length==this.list.length){
this.checked=true;
}else{
this.checked=false;
}
}
},
methods: {
checkAll(){
if(this.checked){
this.checkModel=[];
}else{
this.list.forEach((item)=>{
if(this.checkModel.indexOf(item.id)==-1){
this.checkModel.push(item.id)
}
})
}
},