頁面展示
在這里插入圖片描述
html
<body>
<div id="my">
<div class="container-fluid">
<div class="row">
<!--左側(cè)-->
<div class="col-xs-5 col-sm-5">
<div class="panel panel-success">
<!--標(biāo)題-->
<div class="panel-heading clearfix">
<span class="pull-right"></span>
</div>
<!--內(nèi)容-->
<div class="panel-body panel-height">
<ul class="list-unstyled">
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--中間-->
<div class="col-xs-2 col-sm-2 text-center">
<div>
<button type="button" class="btn btn-primary anniu">>></button>
</div>
<br />
<div>
<button type="button" class="btn btn-primary anniu"><<</button>
</div>
</div>
<!--右側(cè)-->
<div class="col-xs-5 col-sm-5">
<div class="panel panel-info">
<!--標(biāo)題-->
<div class="panel-heading clearfix">
<span class="pull-right"></span>
</div>
<!--內(nèi)容-->
<div class="panel-body panel-height">
<ul class="list-unstyled">
<li>
<div class="checkbox">
<label>
<input type="checkbox" />
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
javascript
window.onload = function () {
new Vue({
el: "#my",
data: {
leftData:[
{id:1,name:'數(shù)據(jù)1',check:true},
{id:2,name:'數(shù)據(jù)2',check:false},
{id:3,name:'數(shù)據(jù)3',check:false},
{id:4,name:'數(shù)據(jù)4',check:false},
{id:5,name:'數(shù)據(jù)5',check:false},
{id:6,name:'數(shù)據(jù)6',check:false},
{id:7,name:'數(shù)據(jù)7',check:false},
{id:8,name:'數(shù)據(jù)8',check:false},
{id:9,name:'數(shù)據(jù)9',check:false},
],
rightData:[]//右側(cè)數(shù)據(jù)
},
computed: {
num() {
return function(data,state) {
return this.commonEvt(data,state).length
}
}
},
methods: {
// 把左邊的數(shù)據(jù)添加到右邊
toRight() {
var arr = this.commonEvt(this.leftData,true);
if(arr.length) {
this.rightData = [...this.rightData,...arr];
this.leftData = this.commonEvt(this.leftData,false); // 左邊顯示的數(shù)據(jù)
} else {
alert("請勾選數(shù)據(jù)")
}
},
toLeft() {
var arr = this.commonEvt(this.rightData,true)
if(arr.length) {
this.leftData = [...this.leftData,...arr]; // 左邊顯示添加的數(shù)據(jù)
this.rightData = this.commonEvt(this.rightData,false); // 右邊顯示的數(shù)據(jù)
} else {
alert("請勾選數(shù)據(jù)")
}
},
// 公共篩選方法
commonEvt(data,state) {
return data.filter(item => item.check == state)
}
},
mounted() {
}
})
}
