原生js实现一个带瀑布流的穿梭框

介绍：点击左边变色，并且把点击的数据穿梭到右边，二次点击左边可以取消，并且右边的数据也会消失。点击右边可以移除数据，并且左边的数据背景颜色也会变回正常。左侧下滑实现一个瀑布流的懒加载。

html部分

<template>
  <div class="kehubox clear">
    <div class="kehuname clear">
      <h5>客户端名称</h5>
      <h5>权限编号</h5>
      <h5>描述</h5>
      <div class="table" @scroll="leftTablesScroll" ref="leftTables">
        <div
          class="tableItem clear"
          :style="{
            backgroundColor: item.isActive ? '#ebf7ff' : '#fff',
          }"
          v-for="(item, index) in tables"
          :key="index"
          @click="clickTableItem(item)"
        >
          <div class="hlys">{{ item.appName }}</div>
          <div class="hlys">{{ item.permSign }}</div>
          <div class="hlys">{{ item.description }}</div>
        </div>
      </div>
    </div>
    <div class="limitsBox">
      <div class="limitsMall">已选择权限</div>
      <div class="limitsList">
        <div
          class="errItem"
          v-for="(item, index) in columns1"
          :key="index"
          @click="deleteList(item)"
        >
          {{ item.permSign }}
        </div>
      </div>
    </div>
  </div>
</template>

css代码块

.kehubox {
  height: 200px;
  padding-top: 40px;
  .kehuname {
    float: left;
    width: 50%;
    h5 {
      float: left;
      width: 33.33%;
    }
    .table {
      width: 100%;
      height: 650px;
      border: 1px solid #ddd;
      border-radius: 3px;
      overflow-y: auto;
      .tableItem {
        height: 50px;
        padding-left: 5px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
        line-height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .hlys {
          text-align: left;
          width: 33.33%;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .active {
        background: rgb(233, 244, 253);
      }
    }
  }
}
.limitsBox {
  width: 40%;
  float: left;
  padding-left: 40px;
  .limitsMall {
    margin-bottom: 20px;
  }
  .limitsList {
    width: 350px;
    height: 500px;
    overflow-y: auto;
    border: 1px solid #ccc;
    .errItem {
      font-size: 20px;
      padding: 0 20px;
      line-height: 45px;
      border: 1px solid;
    }
  }
}
.clear:after {
  content: ""; /*里面可以为空、内容的意思*/
  visibility: hidden; /*隐藏*/
  height: 0;
  display: block;
  clear: both;
  overflow: hidden;
}
.clear {
  zoom: 1; /*这个转为解决IE6的bug的*/
}

js逻辑代码块

 data() {
    return {
      tables: [
        {
          appName: "小米",
          permSign: "1",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "1",
        },
        {
          appName: "小米",
          permSign: "2",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "2",
        },
        {
          appName: "小米",
          permSign: "3",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "3",
        },
        {
          appName: "小米",
          permSign: "4",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "4",
        },
        {
          appName: "小米",
          permSign: "5",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "5",
        },
        {
          appName: "小米",
          permSign: "6",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "6",
        },
        {
          appName: "小米",
          permSign: "7",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "7",
        },
        {
          appName: "小米",
          permSign: "8",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "8",
        },
        {
          appName: "小米",
          permSign: "9",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "9",
        },
        {
          appName: "小米",
          permSign: "10",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "10",
        },
        {
          appName: "小米",
          permSign: "11",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "11",
        },
        {
          appName: "小米",
          permSign: "12",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "12",
        },
        {
          appName: "小米",
          permSign: "13",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "13",
        },
        {
          appName: "小米",
          permSign: "14",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "14",
        },
        {
          appName: "小米",
          permSign: "15",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "15",
        },
        {
          appName: "小米",
          permSign: "16",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "16",
        },
        {
          appName: "小米",
          permSign: "17",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "17",
        },
        {
          appName: "小米",
          permSign: "18",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "18",
        },
        {
          appName: "小米",
          permSign: "19",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "19",
        },
        {
          appName: "小米",
          permSign: "20",
          description: "跑步",
          description: "跑步",
          isActive: false,
          appInfoId: "20",
        },
      ],
      pageNum: 1,
      pageSize: 10,
      columns1: [],
    };
  },
  methods: {
    // 下滑，实现一个瀑布流
    leftTablesScroll() {
      let scrolltop = this.$refs.leftTables.scrollTop;
      let offsetheight = this.$refs.leftTables.offsetHeight;
      let scrollheight = this.$refs.leftTables.scrollHeight;
      if (
        scrollheight - offsetheight - scrolltop < 100 &&
        this.isLoadingRoleList
      ) {
        this.pageNum++;
        // this.getClient();
      }
    },
    // 左侧点击
    clickTableItem(newName) {
      if (newName.isActive == false) {
        this.columns1.push(newName);
        newName.isActive = true;
      } else {
       // 再次点击时候取消
        newName.isActive = false;
        this.columns1 = this.columns1.filter(
          (item) => item.appInfoId !== newName.appInfoId
        );
      }
    },
    // 右侧取消
    deleteList(name) {
      this.columns1 = this.columns1.filter((item) => item !== name);
      this.tables.forEach((item) => {
        if (item.appInfoId == name.appInfoId) {
          item.isActive = false;
        }
      });
    },
  },

原创作品，不要盗取。转载前请和作者沟通