自己实现一个elementUI穿梭框，没有样式只是自己写着玩的只实现了穿梭框的左右穿梭功能

自己实现一个elementUI穿梭框，没有样式只是自己写着玩的只实现了穿梭框的左右穿梭功能后期有时间会好好写样式 封装成组件，给大家使用！

<template>
    <div>
        <ul>
          <li v-for="item  in list" :key="item.code">
              <input type="checkbox" @change="handleChange(item)">
              <span>{{ item.name }}</span>
          </li>
        </ul>
        <button @click="handleRight" :disabled="list.length === 0">右</button>
        <button @click="handleLeft" :disabled="listOne.length === 0">左</button>
        <ul>
          <li v-for="item  in listOne" :key="item.code">
              <input type="checkbox" @change="handleChangeRight(item)">
              <span>{{ item.name }}</span>
          </li>
        </ul>
    </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          code: "1",
          name: "小红"
        },
        {
          code: "2",
          name: "小明"
        },
        {
          code: "3",
          name: "小刚"
        },
        {
          code: "4",
          name: "小宋"
        }
      ],
      listOne: [],
      itemList: [],
       itemRight: []
    }
  },
  methods: {
    handleChange (item) {
      this.itemList.push(item)
      let obj = {}
      this.itemList = this.itemList.reduce((cur,next) => {
            obj[next.code] ? "" : obj[next.code] = true && cur.push(next)
            return cur
        },[])
    },
    handleLeft () {
     this.listOne = this.exchange(this.listOne, this.itemRight)
     console.log(this.itemRight)
     this.list = this.list.concat(this.itemRight)
     this.itemRight = []
    },
    handleChangeRight (item) {
      this.itemRight.push(item)
      let obj = {};
      this.itemRight = this.itemRight.reduce((cur,next) => {
        obj[next.code] ? "" : obj[next.code] = true && cur.push(next);
        return cur;
      },[])
      console.log(this.itemRight)
    },
    handleRight () {
     this.list = this.exchange(this.list, this.itemList)
     console.log(this.itemList)
     this.listOne = this.listOne.concat(this.itemList)
     this.itemList = []
    },
    exchange (arr, arr1) {
      return arr.filter(item => {
          let idList= arr1.map(v => v.code)
          return !idList.includes(item.code)
      })
    }
  }
}
</script>