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

最新推荐文章于 2024-12-03 09:42:56 发布

原创最新推荐文章于 2024-12-03 09:42:56 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

web 同时被 2 个专栏收录

4 篇文章

订阅专栏

vue.JS

2 篇文章

订阅专栏

本文介绍了一种基于Vue的手动实现的穿梭框组件，仅具备基本的左右穿梭功能，未包含样式设计。作者通过示例代码展示了如何在两个列表间进行元素的双向选择和移动。

自己实现一个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>