https://www.cnblogs.com/Yanss/p/10133606.html
ChangeBox.vue
<template>
<div class="container">
<Row>
<i-col span="5">
<change-box-area :title="sourceTitle"
:data="sourceList"></change-box-area>
</i-col>
<i-col span="2">
<p><Button :disabled="sourceList.length === 0 || sourceRefNum === 0"
class="btn btn-primary"
@click="toTarget()">》</Button></p>
<p><Button :disabled="targetList.length === 0 || targetRefNum === 0"
class="btn btn-primary"
@click="toSource()">《</Button></p>
</i-col>
<i-col span="5">
<change-box-area :title="targetTitle"
:data="targetList"></change-box-area>
</i-col>
</Row>
</div>
</template>
<script>
import ChangeBoxArea from './ChangeBoxArea'
// 这里的 isSeleted 属性可以不用添加，可以在 JS 中进行处理，一般情况下后端返回的数据也不会带有类似这种静态状态的属性
let dataList = [
{
indicatorCode: 'MK00001',
indicatorName: '安徽华菱汽车'
},
{
indicatorCode: 'MK00002',
indicatorName: '意大利布加迪'
},
{
indicatorCode: 'MK00003',
indicatorName: '广汽乘用车'
},
{
indicatorCode: 'MK00004',
indicatorName: '长安标致雪铁龙'
},
// { id: 1, name: 'HTML5' },
// { id: 2, name: 'CSS3' },
// { id: 3, name: 'Angular' },
// { id: 4, name: 'Vue' },
// { id: 5, name: 'Linux' },
// { id: 6, name: 'JavaScript' }
]
export default {
components: {
ChangeBoxArea
},
name: 'ChangeBox',
data() {
return {
sourceTitle: '源列表',
targetTitle: '目的列表',
sourceList: dataList,
targetList: []
}
},
methods: {
exchange(fd, td) {
let selectedItem = fd.filter(item => item.isSelected).map(item => {
return {
...item,
isSelected: false
}
})
td.push(...selectedItem)
return fd.filter(item => !item.isSelected)
},
// 把选择数据转移到目标（右框）
toTarget() {
this.sourceList = this.exchange(this.sourceList, this.targetList)
console.log(this.sourceList, 'this.sourceList')
},
// 把选择数据转回到源（左框）
toSource() {
this.targetList = this.exchange(this.targetList, this.sourceList)
}
},
computed: {
// 源数据中选中的数量
sourceRefNum() {
return this.sourceList.filter(item => item.isSelected).length
},
// 目标数据中选中的数量
targetRefNum() {
return this.targetList.filter(item => item.isSelected).length
}
}
}
</script>
ChangeBoxArea.vue
<template>
<div class="panel panel-default">
<div class="panel-heading clearfix">
<div class="pull-left">
<div class="checkbox">
<label>
<input :disabled="data.length === 0"
type="checkbox"
@click="toggleAll()"
:checked="selectedAllStatus"><span>{{title}}</span>
</label>
</div>
</div>
<span class="pull-right">{{selectItemNumber}}/{{data.length}}</span>
</div>
<div class="panel-body">
<ul>
<li v-for="item in data"
:key="item.indicatorCode">
<div class="checkbox">
<label>
<input type="checkbox"
v-model="item.isSelected"> {{item.indicatorName}}
</label>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'ChangeBox',
props: ['title', 'data'],
computed: {
// 选择的数量
selectItemNumber() {
return this.data.filter(item => item.isSelected).length
},
// 全选状态
selectedAllStatus() {
if (
this.selectItemNumber === this.data.length &&
this.selectItemNumber !== 0
) {
return true
} else {
return false
}
}
},
methods: {
// 全选及反选
toggleAll() {
let len = this.data.length
let slen = this.data.filter(item => item.isSelected).length
if (len !== slen) {
this.data.map(item => (item.isSelected = true))
} else {
this.data.map(item => (item.isSelected = false))
}
}
}
}
</script>
<style scoped>
ul {
list-style: none;
padding: 0;
}
.checkbox {
margin: 0;
}
</style>