VUE + element-ui 实现卡片式平铺布局（无分页）

element-ui 实现分页详见以前的文章：https://blog.csdn.net/nrlovestudy/article/details/82747299本文借鉴了一部分上文，卡片布局部分不再是自己写 DIV 和 CSS ，而是改用了element-ui 的 “card 卡片”，使用方法见：https://element.eleme.cn/#/zh-CN/component/...
NRlovestudy

25119人浏览 · 2019-08-07 14:44:55
NRlovestudy · 2019-08-07 14:44:55 发布
element-ui 实现分页详见以前的文章：https://blog.csdn.net/nrlovestudy/article/details/82747299
本文借鉴了一部分上文，卡片布局部分不再是自己写 DIV 和 CSS ，而是改用了 element-ui 的 “card 卡片”，
使用方法见：https://element.eleme.cn/#/zh-CN/component/card
并且添加了全选和其他功能。
关键点：【最开始这两个点疏忽了，调了一下午。是个小坑】
1、input 的 id 和 label 的 for 都要独立，保证唯一（最方便的就是使用 item 中的唯一字段）
2、input 的 id 和 label 的 for 要一一对应
这是浏览器效果：
以下是代码实现：
【CSS部分较多，这里为了方便全写到 HTML 里面了，实际使用时CSS还是单独放一个文件】
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
 <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/layer/2.3/skin/layer.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  
  <!-- import jquery -->
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>

 
</head>

<style type="text/css">

  /*!
 * icheck-bootstrap v3.0.1 (https://github.com/bantikyan/icheck-bootstrap)
 * Copyright 2018 Hovhannes Bantikyan.
 * Licensed under MIT (https://github.com/bantikyan/icheck-bootstrap/blob/master/LICENSE)
 */
 
 [class*="icheck-"] {
    min-height: 22px;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding-left: 0px;
}

.icheck-inline {
    display: inline-block;
}

    .icheck-inline + .icheck-inline {
        margin-left: .75rem;
        margin-top: 6px;
    }

[class*="icheck-"] > label {
    padding-left: 29px !important;
    min-height: 22px;
    line-height: 22px;
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

[class*="icheck-"] > input:first-child {
    position: absolute !important;
    opacity: 0;
    margin: 0;
}

    [class*="icheck-"] > input:first-child:disabled {
        cursor: default;
    }

    [class*="icheck-"] > input:first-child + label::before,
    [class*="icheck-"] > input:first-child + input[type="hidden"] + label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 22px;
        height: 22px;
        border: 1px solid #D3CFC8;
        border-radius: 0px;
        margin-left: -24px;
    }

    [class*="icheck-"] > input:first-child:checked + label::after,
    [class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 7px;
        height: 10px;
        border: solid 2px #fff;
        margin-left: 5px;
        border-left: none;
        border-top: none;
        transform: translate(7.75px, 4.5px) rotate(45deg);
        -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
    }

[class*="icheck-"] > input[type="radio"]:first-child + label::before,
[class*="icheck-"] > input[type="radio"]:first-child + input[type="hidden"] + label::before {
    border-radius: 50%;
}

[class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + label::before,
[class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-width: 2px;
}

[class*="icheck-"] > input:first-child:disabled + label,
[class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label,
[class*="icheck-"] > input:first-child:disabled + label::before,
[class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label::before {
    pointer-events: none;
    cursor: default;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

.icheck-default > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-default > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #adadad;
}

.icheck-default > input:first-child:checked + label::before,
.icheck-default > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #e6e6e6;
    border-color: #adadad;
}

.icheck-default > input:first-child:checked + label::after,
.icheck-default > input:first-child:checked + input[type="hidden"] + label::after {
    border-bottom-color: #333;
    border-right-color: #333;
}

.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #2e6da4;
}

.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #337ab7;
    border-color: #2e6da4;
}

.icheck-success > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-success > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #4cae4c;
}

.icheck-success > input:first-child:checked + label::before,
.icheck-success > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.icheck-info > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-info > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #46b8da;
}

.icheck-info > input:first-child:checked + label::before,
.icheck-info > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #5bc0de;
    border-color: #46b8da;
}

.icheck-warning > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-warning > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #eea236;
}

.icheck-warning > input:first-child:checked + label::before,
.icheck-warning > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #f0ad4e;
    border-color: #eea236;
}

.icheck-danger > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-danger > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #d43f3a;
}

.icheck-danger > input:first-child:checked + label::before,
.icheck-danger > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #d9534f;
    border-color: #d43f3a;
}

.icheck-turquoise > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-turquoise > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #1abc9c;
}

.icheck-turquoise > input:first-child:checked + label::before,
.icheck-turquoise > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #1abc9c;
    border-color: #1abc9c;
}

.icheck-emerland > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-emerland > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #2ecc71;
}

.icheck-emerland > input:first-child:checked + label::before,
.icheck-emerland > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #2ecc71;
    border-color: #2ecc71;
}

.icheck-peterriver > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-peterriver > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #3498db;
}

.icheck-peterriver > input:first-child:checked + label::before,
.icheck-peterriver > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #3498db;
    border-color: #3498db;
}

.icheck-amethyst > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-amethyst > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #9b59b6;
}

.icheck-amethyst > input:first-child:checked + label::before,
.icheck-amethyst > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #9b59b6;
    border-color: #9b59b6;
}

.icheck-wetasphalt > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-wetasphalt > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #34495e;
}

.icheck-wetasphalt > input:first-child:checked + label::before,
.icheck-wetasphalt > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #34495e;
    border-color: #34495e;
}

.icheck-greensea > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-greensea > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #16a085;
}

.icheck-greensea > input:first-child:checked + label::before,
.icheck-greensea > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #16a085;
    border-color: #16a085;
}

.icheck-nephritis > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-nephritis > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #27ae60;
}

.icheck-nephritis > input:first-child:checked + label::before,
.icheck-nephritis > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #27ae60;
    border-color: #27ae60;
}

.icheck-belizehole > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-belizehole > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #2980b9;
}

.icheck-belizehole > input:first-child:checked + label::before,
.icheck-belizehole > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #2980b9;
    border-color: #2980b9;
}

.icheck-wisteria > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-wisteria > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #8e44ad;
}

.icheck-wisteria > input:first-child:checked + label::before,
.icheck-wisteria > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #8e44ad;
    border-color: #8e44ad;
}

.icheck-midnightblue > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-midnightblue > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #2c3e50;
}

.icheck-midnightblue > input:first-child:checked + label::before,
.icheck-midnightblue > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #2c3e50;
    border-color: #2c3e50;
}

.icheck-sunflower > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-sunflower > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #f1c40f;
}

.icheck-sunflower > input:first-child:checked + label::before,
.icheck-sunflower > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #f1c40f;
    border-color: #f1c40f;
}

.icheck-carrot > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-carrot > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #e67e22;
}

.icheck-carrot > input:first-child:checked + label::before,
.icheck-carrot > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #e67e22;
    border-color: #e67e22;
}

.icheck-alizarin > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-alizarin > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #e74c3c;
}

.icheck-alizarin > input:first-child:checked + label::before,
.icheck-alizarin > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #e74c3c;
    border-color: #e74c3c;
}

.icheck-clouds > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-clouds > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #ecf0f1;
}

.icheck-clouds > input:first-child:checked + label::before,
.icheck-clouds > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #ecf0f1;
    border-color: #ecf0f1;
}

.icheck-clouds > input:first-child:checked + label::after,
.icheck-clouds > input:first-child:checked + input[type="hidden"] + label::after {
    border-bottom-color: #95a5a6;
    border-right-color: #95a5a6;
}

.icheck-concrete > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-concrete > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #95a5a6;
}

.icheck-concrete > input:first-child:checked + label::before,
.icheck-concrete > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #95a5a6;
    border-color: #95a5a6;
}

.icheck-orange > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-orange > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #f39c12;
}

.icheck-orange > input:first-child:checked + label::before,
.icheck-orange > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #f39c12;
    border-color: #f39c12;
}

.icheck-pumpkin > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-pumpkin > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #d35400;
}

.icheck-pumpkin > input:first-child:checked + label::before,
.icheck-pumpkin > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #d35400;
    border-color: #d35400;
}

.icheck-pomegranate > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-pomegranate > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #c0392b;
}

.icheck-pomegranate > input:first-child:checked + label::before,
.icheck-pomegranate > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #c0392b;
    border-color: #c0392b;
}

.icheck-silver > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-silver > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #bdc3c7;
}

.icheck-silver > input:first-child:checked + label::before,
.icheck-silver > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #bdc3c7;
    border-color: #bdc3c7;
}

.icheck-asbestos > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-asbestos > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: #7f8c8d;
}

.icheck-asbestos > input:first-child:checked + label::before,
.icheck-asbestos > input:first-child:checked + input[type="hidden"] + label::before {
    background-color: #7f8c8d;
    border-color: #7f8c8d;
}

  
  

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
  position: relative;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
} 

 .el-col:hover{
    box-shadow: 0 0 0 3px #254073;
    animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
    -o-animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
    -ms-animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
    -moz-animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
    -webkit-animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
    
}
.el-col-selected{
  border:5px solid #5cb85c;
}
   
   
#selectNum{
  margin-right:25px;
}
#selectNum::after {
  position: absolute;
  content: attr(data-counter);
  padding: 5px 8px;
  margin: -20px 0 0 3px;
  line-height: 100%;
  border: 2px #fff solid;
  border-radius: 60px;
  background: #337ab7;
  transition: 0.1s linear;
  -o-transition: 0.1s linear;
  -ms-transition: 0.1s linear;
  -moz-transition: 0.1s linear;
  -webkit-transition: 0.1s linear;
  opacity: 0;
}
#selectNum.el-button--success::after {
  opacity: 1;
}

.imgText{
   padding: 14px;
   text-align: center;
   background-color: #61B6F7;
   color:#fff;
}

</style>

<body class="no-skin">

	<!-- /section:basics/navbar.layout -->
	<div class="main-container" id="main-container">
		<!-- /section:basics/sidebar -->
		<div class="main-content">
			<div class="main-content-inner">
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">

<!--================================================  -->
<div id="main" style="margin-top:8px;" >


<!-- 按钮  --> 
<div style="margin-top:8px;" >

<div style="width:100%;display:inline-block;padding-right:24px;padding-top:10px;padding-bottom:10px;background-color: #fff;" >
	<div style="float:right;display:inline-block" >
	    <el-button type="success" @click="selectAll" class="selectAll" >全选</el-button>
	    <el-button type="info" icon="el-icon-check" circle id="selectNum" data-counter="0" style="cursor:default;"></el-button>
	    <el-button type=primary @click="downloadPhoto()">导出图片</el-button>
      <el-button type="danger" @click="delPhoto()">删除图片</el-button>
  </div>
</div>	
	
<!-- 按钮结束  --> 


<div class="listBox" id="mainArea"  style="padding:15px;overflow-y: scroll;" >
<!-- 列表区域  --> 
	<el-row>
	  <el-col :span="4" v-for="(item,index) in items"  :offset="index === 0 ? 0 : (index%5 === 0 ? '0' : '1')" style="margin-bottom:25px;'">
	    <el-card :body-style="{ padding: '0px' }"   @dblclick.native="toOtherPage(item.url)"  title="双击跳转页面">
	     
  	   <div class="checkbox icheck-success" style="position: absolute;z-index: 999;">
  			<input type="checkbox" @click="checked(item.id)" :id="item.id" class="checkInput" style="margin-left: 10px;cursor: pointer;"/>
  			<label :for="item.id"  class="checkLable"></label>
  		 </div>
		 
       <img :src="item.url" class="image">
       <div class="imgText" style="cursor:text">
         <span>{{item.name}}</span>
       </div>
	      
	    </el-card>
	  </el-col>
	</el-row>	
</div>	


							
</div>							
							
						
</div>							
<!--================================================  -->						
							
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
		</div>
		<!-- /.main-content -->


		<!-- 返回顶部 -->
		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>

	</div>
	<!-- /.main-container -->


	

<script>

$(function () {
	
    vm.initPage();
    
   
   // $("#mainArea").css("height",areaH);
   
}); 

/****************************VUE 部分开始***********************************/
var vm = new Vue({
    el:"#main",
    data:{
    	currentDate: new Date(),
    	items: [], 
		checkList: [],
		total: 0,
    },
    methods: {

         //演示用 initPage
         initPage : function () { 
             var thispage = this;
            thispage.items=[
             {id:1,name:'图片01',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
             {id:2,name:'图片02',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
             {id:3,name:'图片03',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
             {id:4,name:'图片04',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
             {id:5,name:'图片05',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
             {id:6,name:'图片06',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
             {id:7,name:'图片07',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
             {id:8,name:'图片08',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
             {id:9,name:'图片09',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
             {id:10,name:'图片10',introduce:'VUE',url:'https://cn.vuejs.org/images/logo.png'}, 
            ];
             thispage.total = 110;
               
          },


        //实际应用中的 initPage
        /*initPage : function () {
        	var thispage = this;
            $.ajax({                              //必须采用ajax格式，否则数据不会更新
                    type:"post",
                    dataType:"json",
                    url: "getInfo",
                    data: {},
                    success:function(data){
                 	     thispage.items=data.data.rows;
                       thispage.total=data.data.total;
                    }
                });
        },*/
        
        /*************跳转**************/
        toOtherPage: function (url) {
        	window.location.href='url';
        },
        
        
        /*************删除**************/
        delPhoto: function () {
        	var thispage = this;
        	var len = thispage.checkList.length;
        	if(len==0){
        		layer.msg('请选择要删除的文件！', {icon: 0});
        	}
        	else{
        		//判断是否全选 全选时，删除的是上级目录
        		if(len == thispage.total){
        			thispage.deleteData(true,0);
        			console.log('全选');
        		}
        		else{
        			console.log('非全选');
        			var aa=[];
            		for(var i=0;i<len;i++ )
            		   {
            		       var id =thispage.checkList[i];
            		       aa.push(id);
            		   }
            	    var ids = aa.join(",");	
    	        	thispage.deleteData(false,ids);
        		}
        		
       
        	}
        },
        
        deleteData: function (allSelected,ids) {
        	var thispage = this;
        	var dialog = layer.open({
           	    title:"删除确认",//标题信息
           	    content: '确认删除吗？',//内容区域
           	    move: false,//是否可以拖动，默认可以拖动
           	    btn: ['确认', '取消'],
           	    btn1: function(dialog){
           	    	
  	           	    $.ajax({                              //必须采用ajax格式，否则数据不会更新
  	                       type:"post",
  	                       dataType:"json",
  	                       url: "del",
  	                       data:{
  	                    	  allSelected:allSelected,
  	                       	  ids:ids,  	                       	  
  	                       },
  	                       success:function(data){
  	                    	   layer.close(dialog);
  	                    	   layer.msg(data.message, {icon: 1});
  	                    	   thispage.cancelChecked();
  	                    	   thispage.initPage();
  	       	        	   }
  	                });
           	    	
           	    },
           	    btn2: function(dialog){
           	        //移除已选中的 input 样式
            	    thispage.cancelChecked();
           	        layer.close(dialog);
           	    },
           	    // 右上角关闭按钮的点击事件
           	    cancel: function(){
           	    	thispage.cancelChecked();
           	    }
           	 
           	});
        	
        },
        
        /*************下载**************/
        downloadPhoto: function () {
        	var thispage = this;
        	var len = thispage.checkList.length;
        	if(len==0){
        		layer.msg('请选择要导出的文件！', {icon: 0});
        	}
        	else{
        		//判断是否全选 全选时，删除的是上级目录
        		if(len == thispage.total){
        			thispage.downloadData(true,0);
        			console.log('全选');
        		}
        		else{
        			console.log('非全选');
        			var aa=[];
            		for(var i=0;i<len;i++ )
            		   {
            		       var id =thispage.checkList[i];
            		       aa.push(id);
            		   }
            	    var ids = aa.join(",");	
    	        	thispage.downloadData(false,ids);
        		}
        		
       
        	}
        },
        
        downloadData: function (allSelected,ids) {
        	var thispage = this;
        	var dialog = layer.open({
           	    title:"导出确认",//标题信息
           	    content: '确认导出吗？',//内容区域
           	    move: false,//是否可以拖动，默认可以拖动
           	    btn: ['确认', '取消'],
           	    btn1: function(dialog){
           	    	
           	    	window.location.href='downloadCam?allSelected='+allSelected+"&ids="+ids;
           	    	
           	    	layer.close(dialog);
               	    thispage.cancelChecked();
           	    	
           	    },
           	    btn2: function(dialog){
           	        //移除已选中的 input 样式
            	    thispage.cancelChecked();
           	        layer.close(dialog);
           	    },
           	    // 右上角关闭按钮的点击事件
           	    cancel: function(){
           	    	thispage.cancelChecked();
           	    }
           	 
           	});
        	
        },
        
        
       
       
        /*************全选**************/
        selectAll:function (){
        	var thispage = this;
        	
        	if($('.selectAll').text()=='全选'){  //全选
        		
        		$('.selectAll').text('取消选择');
        		
        		
        		//第一步：填充 thispage.checkList
        		if(thispage.items.length > 0){
        			for ( var i = 0; i <thispage.items.length; i++){
            	        thispage.checkList.push(thispage.items[i].cameraSerial)
            	    }
        		}
        		else{
        			layer.msg("无可选项", {icon: 1});
        			return;
        		}
            	
            	//第二步：设置 input 样式 为选中
        		$('.checkInput').each(function(){
            		let input = $(this)
            		input.prop("checked",true);
            	});
            	
        		//设置右上角指示区
        		$('#selectNum').removeClass('el-button--info').addClass('el-button--success');
	        	$('#selectNum').attr('data-counter',thispage.checkList.length);
        	    
        		//设置卡片样式
	        	$('.el-col').each(function(){
	        		let elcol = $(this);
	        		elcol.addClass("el-col-selected");	
        	  });
	        	
	        	
	        	console.log(thispage.checkList);
        		
        	}
        	else{   //取消已选
        		
        		thispage.cancelChecked();
        	}
        	

        	
        },
        
        /*************取消已选**************/
        cancelChecked: function () {
        	var thispage = this;
        	$('.selectAll').text('全选');
    		
    		//首先清空数组
    		thispage.checkList.splice(0);
    		
    		//移除已选中的 input 样式
    	    $('.checkInput').each(function(){
        		let input = $(this)
        		if(input.prop('checked')){
        			input.prop("checked",false);
        		}
        	});
    		
    	    //设置右上角指示区
    	    $('#selectNum').removeClass('el-button--success').addClass('el-button--info');
        	$('#selectNum').attr('data-counter',0);
        	
        	//设置卡片样式
        	$('.el-col').each(function(){
        		let elcol = $(this);
        		if(elcol.hasClass("el-col-selected")){
        			elcol.removeClass("el-col-selected");
        		}
        			
    	    });
        	
        	console.log(thispage.checkList);
    		
        },
       
       /****************单选****************/
       checked:function(id) {      //点击一次选中，再点击一次取消选中
			    var thispage = this;
	        
	        if (thispage.checkList.indexOf(id) > -1) 
	        {
	          //存在，删除
	          let index = thispage.checkList.indexOf(id);
	          thispage.checkList.splice(index, 1);
	          
	          $('#'+id).parent().parent().parent().parent().removeClass('el-col-selected');
	        } 
	        else {
	         //不存在，加入	
	          thispage.checkList.push(id);
	         
	          $('#'+id).parent().parent().parent().parent().addClass('el-col-selected');
	        }
        
	        //设置全选按钮文字
	        if(thispage.checkList.length===0){
	        	$('.selectAll').text('全选');
	        	$('#selectNum').removeClass('el-button--success').addClass('el-button--info');
	        	$('#selectNum').attr('data-counter',0);
	        	
	        }
	        else{
	        	$('.selectAll').text('取消选择');
	        	$('#selectNum').removeClass('el-button--info').addClass('el-button--success');
	        	$('#selectNum').attr('data-counter',thispage.checkList.length);
	        }
	        
	        console.log(thispage.checkList);
	  },
	 
        
        
      

      },



});

/****************************VUE 部分结束***************************************/



  
</script>


</body>
</html>
Vue
前往低代码交流专区
更多推荐
Vue里echarts根据页面大小动态调整/自适应
Vue
vue 表单验证
1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^