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>