页面展示
在这里插入图片描述
html
<body>
<div id="my">
<div class="container-fluid">
<div class="row">
<!--左侧-->
<div class="col-xs-5 col-sm-5">
<div class="panel panel-success">
<!--标题-->
<div class="panel-heading clearfix">
<span class="pull-right"></span>
</div>
<!--内容-->
<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>
<!--右侧-->
<div class="col-xs-5 col-sm-5">
<div class="panel panel-info">
<!--标题-->
<div class="panel-heading clearfix">
<span class="pull-right"></span>
</div>
<!--内容-->
<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:'数据1',check:true},
{id:2,name:'数据2',check:false},
{id:3,name:'数据3',check:false},
{id:4,name:'数据4',check:false},
{id:5,name:'数据5',check:false},
{id:6,name:'数据6',check:false},
{id:7,name:'数据7',check:false},
{id:8,name:'数据8',check:false},
{id:9,name:'数据9',check:false},
],
rightData:[]//右侧数据
},
computed: {
num() {
return function(data,state) {
return this.commonEvt(data,state).length
}
}
},
methods: {
// 把左边的数据添加到右边
toRight() {
var arr = this.commonEvt(this.leftData,true);
if(arr.length) {
this.rightData = [...this.rightData,...arr];
this.leftData = this.commonEvt(this.leftData,false); // 左边显示的数据
} else {
alert("请勾选数据")
}
},
toLeft() {
var arr = this.commonEvt(this.rightData,true)
if(arr.length) {
this.leftData = [...this.leftData,...arr]; // 左边显示添加的数据
this.rightData = this.commonEvt(this.rightData,false); // 右边显示的数据
} else {
alert("请勾选数据")
}
},
// 公共筛选方法
commonEvt(data,state) {
return data.filter(item => item.check == state)
}
},
mounted() {
}
})
}
