checkType不传默认多选，checkType: 'single'单选
<!DOCTYPE html>
<html>
<head>
<title>vue 实现一个单选或者多选tabs,带分页</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style type="text/css">
html {
background: rgba(30, 42, 58);
color: #fff;
}
#app {
width: 420px;
height:100%;
padding: 10px;
position: relative;
}
.energyRanking {
}
.er_title>div:last-child {
font-size: 14px;
}
.er_title .prev,
.er_title .next {
color: #1DFFF7;
width: 15px;
height: 15px;
background: rgba(20, 36, 61, 1);
border: 1px solid rgba(74, 107, 124, 1);
border-radius: 2px;
cursor: pointer;
}
.er_title .prev {}
.er_title .next {
margin-left: 4px;
}
.er_title .dots {}
.er_title .dots .active {
opacity: 0.2;
}
.er_title .dot {
display: block;
width: 6px;
height: 6px;
margin-left: 4px;
background: #1DFFF7;
border-radius: 50%;
cursor: pointer;
}
.er_content {
font-size: 14px;
color: #fff;
}
.er_content .elem {
width: 72px;
height: 30px;
background: rgba(27, 168, 171, 0);
border: 1px solid rgba(41, 147, 154, 1);
border-radius: 4px;
margin: 3px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.er_content .elem:hover {
background: rgba(40, 78, 110, 1);
color: #00FFFF;
}
.er_content .elemed {
background: rgba(27, 168, 171, 1);
color: #fff;
}
.er_content .elemed:hover {
background: rgba(40, 78, 110, 1);
color: #00FFFF;
}
/*---------flex----------*/
.flex {
display: flex;
align-items: center;
}
.flex_c {
flex-direction: column;
}
.flex_w {
flex-wrap: wrap;
}
.flex_r_a {
justify-content: space-around;
}
.flex_r_b {
justify-content: space-between;
}
.flex_r_c {
justify-content: center;
}
.flex_r_e {
justify-content: flex-end;
}
@media (min-width: 1366px) and (max-width: 1919px) {
.er_title .prev,
.er_title .next {
width: 13px;
height: 13px;
}
.er_content .elem {
width: 61px;
height: 24px;
background: rgba(27, 168, 171, 0);
border: 1px solid rgba(41, 147, 154, 1);
border-radius: 4px;
margin: 3px;
cursor: pointer;
}
.er_content {
font-size: 12px;
color: #fff;
}
.common_title_left .title_name {
height: 30px;
}
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="flex er_title flex_r_b">
<div class="common_title_left flex">
<p class="title_line"></p>
<div class="title_name flex "><span>能耗排序</span></div>
</div>
<div class="flex">
<div class="prev flex flex_r_c" @click='prevPage'><i class="fa fa-angle-left"></i></div>
<div class="dots flex">
<span class="dot" :class="{'active':page!=pageIndex}" v-for='page in pages'></span>
</div>
<div class="next flex flex_r_c" @click='nextPage'><i class="fa fa-angle-right"></i></div>
</div>
</div>
<div class="er_content flex flex_w">
<div class="elem flex flex_r_c flex_r_w" @click='changeElem(elem)' :class="{'elemed':getElemed(elem)}" v-for='elem in elems[pageIndex-1]'><span>{{elem.name}}</span></div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
elems: [], //每页显示的值
elemCheckedList: [], //选中的数组
pages: 0,//页数
pageIndex: 1,//第几页
}
},
props: {
obj: {
type: Object,
default: {
checkType: 'single',
dataList: [{
code: 1,
name: '综合'
}, {
code: 2,
name: '废水接管'
}, {
code: 3,
name: 'COD'
}, {
code: 4,
name: 'NH3'
}, {
code: 5,
name: '总氮'
}, {
code: 6,
name: '总磷'
}, {
code: 7,
name: '二氧化硫'
}, {
code: 8,
name: 'NOX'
}, {
code: 9,
name: '烟粉尘'
}, {
code: 10,
name: '挥发有机物'
}, {
code: 11,
name: 'NOX'
}, {
code: 12,
name: '烟粉尘'
}, {
code: 13,
name: '挥发有机物'
}]
}
},
},
mounted() {
let vm = this;
vm.init()
},
methods: {
init() {
let vm = this;
let list = vm.obj.dataList;
vm.pages = Math.floor(list.length / 10) + 1; //页数
for (var i = 0; i < vm.pages; i++) {
vm.elems.push(list.slice(i * 10, 10 * (i + 1)))
}
console.log(vm.elems);
},
prevPage() {
let vm = this;
if (vm.pageIndex == 1) {
return;
}
vm.pageIndex--;
},
nextPage() {
let vm = this;
if (vm.pageIndex == vm.pages) {
return;
}
vm.pageIndex++;
},
changeElem(elem) {
let vm = this;
let index = this.elemCheckedList.indexOf(elem.code);
if(vm.obj.checkType && vm.obj.checkType == 'single'){
let arr = [];
arr[0] = elem.code;
vm.elemCheckedList = arr;
} else {
if (index !== -1) {
this.elemCheckedList.splice(index, 1)
} else {
this.elemCheckedList.push(elem.code)
}
}
console.log(this.elemCheckedList)
},
getElemed(elem) {
let index = this.elemCheckedList.indexOf(elem.code);
if (index !== -1) {
return true;
} else {
return false;
}
},
}
})
</script>
</body>
</html>
网友评论