<div id="app">
<div class="left">
<div class="info">
<input type="checkbox" v-model="checkAll" @change="checkChangeAll"/>
<input v-model="leftInput" placeholder="请输入模糊内容" /><span>{{num(this.leftCity)}}/{{this.leftCity.length}}</span>
</div`>`
<div class="leftCity">
<ul>
<li v-for="item in searchData">
<input v-model="item.check" type="checkbox" />{{item.name}}
</li>
</ul>
</div>
</div>
<div class="container">
<button @click="handleLeft"><<<左移</button>
<button @click="handleRight">>>>右移</button>
</div>
<div class="right">
<div class="bck-r"><span>{{num(this.rightCity)}}/{{this.rightCity.length}}</span></div>
<div class="rightCity">
<ul>
<li v-for="item in rightCity">
<input v-model="item.check" type="checkbox" />{{item.name}}
</li>
</ul>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'hello',
leftCity: [{
name: '北京市',
check: false
},{
name: '广州市',
check: true
},{
name: '深圳市',
check: false
},{
name: '上海市',
check: false
},{
name: '天津市',
check: false
},{
name: '西安市',
check: true
},{
name: '杭州市',
check: false
},{
name: '郑州市',
check: false
}],
rightCity:[],
leftInput: '',
checkAll: false
},
methods: {
handleLeft(){
let selData = this.rightCity.filter(v=>v.check);
this.leftCity.push(...selData);
this.rightCity = this.rightCity.filter(v=>!v.check)
},
handleRight(){
let selData = this.leftCity.filter(v=>v.check);
this.rightCity.push(...selData);
this.leftCity = this.leftCity.filter(v=>!v.check)
},
checkChangeAll(){
this.leftCity.forEach(v=> v.check = this.checkAll);
}
},
computed: {
searchData(){
return this.leftCity.filter(v=>v.name.includes(this.leftInput));
},
num(){
return function (d){
return d.filter(v=>v.check).length;
}
}
},
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
#app {
width: 1300px;
height: 600px;
margin: 100px;
display: flex;
flex-direction: row;
}
.left {
border: 1px solid #dcdcdc;
flex: 0 0 500px;
height: 100%;
}
.left .info,leftCity {
padding: 5px;
}
.left .leftCity li {
list-style-type: none;
padding: 5px;
}
.container {
border: 1px solid #dcdcdc;
flex: 0 0 300px;
height: 100%;
text-align: center;
line-height: 200px;
}
.right{
border: 1px solid #dcdcdc;
flex: 0 0 500px;
height: 100%;
text-align: center;
}
.right .bck-r {
height: 30px;
background-color: aqua;
line-height: 30px;
}
.right .rightCity li {
list-style-type: none;
padding: 5px;
}
</style>
