vue 全选多选
2024-09-21 12:43:53
html:
//全选按钮
<li class="choice_fme">
<div @click="checkAll" v-bind:class='[!isCheckAll ? "not_pitch_on" : "pitch_on"]'></div>
</li>
//列表
<ul class="msge_list clearfix" v-for="(item,index) in messageItems" :key="index">
<li class="choice_fme">
<div v-bind:class='[!isCheck ? "not_pitch_on" : "pitch_on"]' @click="chooseOrder($event)"></div>
</li>
</ul>
//全选按钮
<li class="choice_fme_fast">
<div @click="checkAll" v-bind:class='[!isCheckAll ? "not_pitch_on" : "pitch_on"]'></div>
</li>
js:
export default {
data(){
return{
messageItems:"",//获取到的数组
isCheck:false, //多选按钮
isCheckAll:false,//全选按钮
checkAllNum:0, //选中数量
}
},
methods:{
//多选
chooseOrder:function(e){
if (e.target.className.indexOf("pitch_on") == 0) {
e.target.className = "not_pitch_on" //未选中按钮样式
if( this.checkAllNum>0){
this.checkAllNum -=1
}
}else{
e.target.className = "pitch_on";//选中按钮样式
this.checkAllNum +=1;
}
if(this.checkAllNum == this.messageItems.length){
this.isCheckAll = true
this.isCheck = true
}else if(this.checkAllNum !== this.messageItems.length){
this.isCheckAll = false;
}
},
//全选
checkAll:function(){
if(this.isCheckAll==false){
this.checkAllNum = this.messageItems.length;
this.isCheckAll = true;
this.isCheck = true
}else if(this.isCheckAll==true){
this.isCheck = false
this.checkAllNum = 0
this.isCheckAll = false;
}
},
},
}
css:
.not_pitch_on{
background: url(../../../common/images/k-1.png) no-repeat;
}
.pitch_on{
background: url(../../../common/images/k-2.png) no-repeat !important;
}
最新文章
- padding标准盒模型和怪异盒子模型
- 基于Server-Sent Event的简单在线聊天室
- java分析源码－ReentrantLock
- $("").click与onclick的区别
- Unity3d 怪物死亡燃烧掉效果
- JavaScript基础15——js的DOM对象
- 增加mvc:resources后访问不了注解配置的controller的问题
- Linux怪哉ntfs
- SQL Server 2012 Enterprise Edition安装过程详解(包含每一步设置的含义)
- Gulp安装使用教程
- 2017年编程语言排行榜Top10，第一名是？
- ISCC：Please give me username and password!
- python 的基础学习 第九天 文件的操作
- Vue-cli 创建的项目配置跨域请求（通过反向代理）---配置多个代理--axios请求
- oa项目环境搭建的操作步骤详解
- 使用docker部署.net core应用
- 【Quartz】实现接口封装化（二）
- html5-边框属性
- openstack环境搭建常用命令
- 树莓派获取ip地址发送到邮箱