8行JS代码实现Vue穿梭框

实现效果

完整 demo 参考

<template>
  <div class="contain">
    <ul class="">
      <li class="count">{{num(leftData,true)}}/{{leftData.length}}</li>
      <li v-for="(city,index) in leftData" :key="index">
        <input type="checkbox" v-model="city.check"> {{city.name}}
      </li>
    </ul>
    <div class="btn">
      <button @click="toRight">&gt;&gt; </button>
      <button @click="toLeft">&lt;&lt;</button>
    </div>
    <ul>
      <li class="count">{{num(rightData,true)}}/{{rightData.length}}</li>
      <li v-for="(city,index) in rightData" :key="index">
        <input type="checkbox" v-model="city.check"> {{city.name}}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      leftData: [
        { name: '北京', check: true },
        { name: '天津', check: false },
        { name: '上海', check: false },
        { name: '内蒙', check: false },
        { name: '重庆', check: false },
        { name: '台湾', check: false },
        { name: '香港', check: false },
        { name: '澳门', check: false }
      ],
      rightData: []
    }
  },
  methods: {
    toRight() {
      let selectData = this.filterData(this.leftData, true)
      this.rightData = [...this.rightData, ...selectData]
      this.leftData = this.filterData(this.leftData, false)
    },
    toLeft() {
      let selectData = this.filterData(this.rightData, true)
      this.leftData = [...this.leftData, ...selectData]
      this.rightData = this.filterData(this.rightData, false)
    },
    filterData: (data, state) => data.filter(item => item.check == state)
  },
  computed: {
    num() {
      return (data, state) => this.filterData(data, state).length
    }
  }
}

</script>
<style scoped>
.contain {
  padding: 100px;
}
ul {
  display: inline-block;
  width: 200px;
  border: 1px solid #ccc;
  min-height: 400px;
  vertical-align: top;
  padding: 0;
  margin: 0;
}
li {
  line-height: 37px;
  width: 200px;
  border-bottom: 1px solid #ccc;
  text-align: center;
  list-style: none;
}
.count {
  text-align: right;
  color: brown;
  padding-right: 20px;
  background: #eee;
  height: 45px;
  line-height: 45px;
  box-sizing: border-box;
}
.btn {
  display: inline-block;
  width: 100px;
  text-align: center;
  padding-top: 150px;
}
button {
  width: 80px;
  margin-bottom: 20px;
  text-align: center;
}
</style>