封装element穿梭框，包含前端分页，查询，全选所有，全选当页，反选功能

最新推荐文章于 2024-06-30 12:46:56 发布

莫宛

最新推荐文章于 2024-06-30 12:46:56 发布

阅读量1.2k

点赞数 4

分类专栏： Vue 文章标签：前端 vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_43837235/article/details/127106651

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

封装穿梭框

请添加图片描述

利用element组件封装了一个包含前端分页，查询，全选所有，全选当页，反选功能的穿梭框。
纯手动封装，如有建议欢迎评论探讨。话不多说，直接上代码！

组件文件

<template>
  <div class="transfer">
    <div class="left-box card-box">
      <div class="box-top">
        <el-dropdown placement="bottom-start">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down icon-margin"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="chooseAll('left')">全选所有</el-dropdown-item>
            <el-dropdown-item @click.native="chooseCurrentAll('left')">全选当页</el-dropdown-item>
            <el-dropdown-item @click.native="chooseReverse('left')">反选当页</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span class="total-tip">{{`${leftCheckList.length}/${leftTotal}台`}}</span>
        <span class="title-tip">{{titles[0]}}</span>
      </div>
      <div class="box-content">
        <div class="search-margin">
          <el-input
            :placeholder="filterPlaceholder"
            prefix-icon="el-icon-search"
            size="small"
            v-model="leftSearch"
            clearable
            @input="searchClick($event,'left')"
          ></el-input>
        </div>
        <div class="checkbox-group">
          <el-checkbox-group v-model="leftCheckKeys">
            <el-checkbox
              class="wrap-text"
              v-for="item in leftTransferDataList"
              @change="handleCheck($event, item, 'left')"
              :key="item.value"
              :label="item.label"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="box-bottom">
        <el-pagination
          small
          slot="left-footer"
          @current-change="handleCurrentChange($event,'left')"
          :current-page="leftPageOption.currentPage"
          :page-size="leftPageOption.pageSize"
          layout="prev, pager, next, jumper"
          :total="leftPageOption.total"
        ></el-pagination>
      </div>
    </div>
    <div class="buttons-box">
      <el-button
        type="primary"
        icon="el-icon-arrow-right"
        :disabled="leftCheckList.length<1"
        @click="transferData('toRight')"
      ></el-button>
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        :disabled="rightCheckList.length<1"
        @click="transferData('toLeft')"
      ></el-button>
    </div>
    <div class="right-box card-box">
      <div class="box-top">
        <el-dropdown placement="bottom-start">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down icon-margin"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="chooseAll('right')">全选所有</el-dropdown-item>
            <el-dropdown-item @click.native="chooseCurrentAll('right')">全选当页</el-dropdown-item>
            <el-dropdown-item @click.native="chooseReverse('right')">反选当页</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span class="total-tip">{{`${rightCheckList.length}/${rightTotal}台`}}</span>
        <span class="title-tip">{{titles[1]}}</span>
      </div>
      <div class="box-content">
        <div class="search-margin">
          <el-input
            :placeholder="filterPlaceholder"
            prefix-icon="el-icon-search"
            size="small"
            v-model="rightSearch"
            clearable
            @input="searchClick($event,'right')"
          ></el-input>
        </div>
        <div class="checkbox-group">
          <el-checkbox-group v-model="rightCheckKeys">
            <el-checkbox
              class="wrap-text"
              v-for="item in rightTransferDataList"
              :key="item.value"
              :label="item.label"
              @change="handleCheck($event, item, 'right')"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="box-bottom">
        <el-pagination
          small
          slot="right-footer"
          @current-change="handleCurrentChange($event,'right')"
          :current-page="rightPageOption.currentPage"
          :page-size="rightPageOption.pageSize"
          layout="prev, pager, next, jumper"
          :total="rightPageOption.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "transferPage",
  props: {
    titles: {
      type: Array,
      default: () => ["待选列表", "已选列表"],
    },
    filterPlaceholder: {
      type: String,
      default: '请输入内容',
    },
    // 可筛选
    filterable: {
      type: Boolean,
      default: false,
    },
    // 左侧数据
    leftTransferData: {
      type: Array,
      default: () => []
    },
    // 右侧数据
    rightTransferData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      leftOriginDataList: [], // 源数据(未经过搜索过滤)
      leftAllDataList: [], // 分页前的数据
      leftTransferDataList: [], // 左侧展示列表（当前页）
      leftCheckKeys: [], // 左侧被选中数据的label
      leftCheckList: [], // 左侧被选中的数据列表
      leftSearch: '', // 左侧搜索数据
      leftPageOption: {
        currentPage: 1, //当前页
        pageSize: 10, //默认的每页显示条数
        total: 0 //总条目数
      },

      rightOriginDataList: [], // 源数据
      rightAllDataList: [], // 分页前的数据
      rightTransferDataList: [],
      rightCheckKeys: [],
      rightCheckList: [],
      rightSearch: '',
      rightPageOption: {
        currentPage: 1, //当前页
        pageSize: 10, //默认的每页显示条数
        total: 0 //总条目数
      },
      search: {
        code: "",
        name: "",
      }, //存储搜索框中填入的内
      stashSearch: {
        code: "",
        name: "",
      }, //暂存的搜索列表

    }
  },
  computed: {
    leftTotal() {
      return this.leftOriginDataList.length
    },
    rightTotal() {
      return this.rightOriginDataList.length
    },
  },
  watch: {
    // 源数据改变
    leftTransferData: {
      handler() {
        this.leftOriginDataList = JSON.parse(JSON.stringify(this.leftTransferData))
        this.rightOriginDataList = JSON.parse(JSON.stringify(this.rightTransferData))
        this.leftAllDataList = JSON.parse(JSON.stringify(this.leftTransferData))
        this.rightAllDataList = JSON.parse(JSON.stringify(this.rightTransferData))
        this.init()
      },
      deep: true,
      immediate: true,
    },
    // 源数据改变,重新分页
    rightOriginDataList: {
      handler() {
        this.$emit('transferChange', this.rightOriginDataList)
      },
      deep: true,
    },
  },
  methods: {
    init() {
      this.leftOriginDataList = JSON.parse(JSON.stringify(this.leftTransferData))
      this.rightOriginDataList = JSON.parse(JSON.stringify(this.rightTransferData))
      this.leftAllDataList = JSON.parse(JSON.stringify(this.leftTransferData))
      this.rightAllDataList = JSON.parse(JSON.stringify(this.rightTransferData))
      this.handleDataChange()
    },
    // 全选所有
    chooseAll(type) {
      this[`${type}CheckList`] = this[`${type}AllDataList`]
      this[`${type}CheckKeys`] = this[`${type}AllDataList`].map(item => item.label)
    },
    // 全选当页
    chooseCurrentAll(type) {
      this[`${type}CheckList`] = this[`${type}TransferDataList`]
      this[`${type}CheckKeys`] = this[`${type}TransferDataList`].map(item => item.label)
      this.$forceUpdate()
    },
    // 反选当页
    chooseReverse(type) {
      let currentCheck = this[`${type}CheckKeys`]
      this[`${type}CheckList`] = this[`${type}TransferDataList`].filter(item => !currentCheck.includes(item.label)
      )
      this[`${type}CheckKeys`] = this[`${type}CheckList`].map(item => item.label)
    },
    // 选中回调
    handleCheck(event, data, type) {
      if (event) {
        // 如果是选中
        this[`${type}CheckList`].push(data)
      } else {
        // 如果是取消
        this[`${type}CheckList`].splice(this[`${type}CheckList`].map(item => item.label).indexOf(data.label), 1)
      }
    },
    // 数据穿梭
    transferData(type) {
      if (type == 'toLeft') {
        // 1. 将右侧选中内容放入左侧数组
        this.leftOriginDataList.unshift(...this.rightCheckList)
        // 2. 清除右侧数组中的被选中数据
        this.rightOriginDataList = JSON.parse(JSON.stringify(this.rightOriginDataList.filter(item =>
          !this.rightCheckKeys.includes(item.label))
        ))
        // 3. 清空右侧选中数组，右侧选中标签数组
        this.rightCheckList = []
        this.rightCheckKeys = []
      } else if (type == 'toRight') {
        // 1. 将左侧选中内容放入右侧数组
        this.rightOriginDataList.unshift(...this.leftCheckList)
        // 2. 清除左侧数组中的被选中数据
        this.leftOriginDataList = JSON.parse(JSON.stringify(this.leftOriginDataList.filter(item =>
          !this.leftCheckKeys.includes(item.label))
        ))
        // 3. 清空左侧选中数组，左侧选中标签数组
        this.leftCheckList = []
        this.leftCheckKeys = []
      }
      this.handleDataChange()
    },
    // 数据穿梭后及数据初始化的数据处理
    handleDataChange() {
      // 1. origin源数据发生变化,根据搜索条件,让allDataList随之变化
      // 搜索过滤会做的事: 根据搜索框内容过滤源数据, 分页(此处多了一次无用的分页)
      this.searchFilter('left')
      this.searchFilter('right')
      // 2. 拿到正确的allDataList,处理分页数据:total,currentPage
      this.leftPageOption.total = this.leftAllDataList.length
      this.rightPageOption.total = this.rightAllDataList.length
      // 穿梭后,如果当前框内数据不足currentPage页,则后退一页
      if (this.leftPageOption.total !== 0 && this.leftPageOption.total <= ((this.leftPageOption.currentPage - 1) * this.leftPageOption.pageSize)) {
        this.leftPageOption.currentPage--
      }
      // 穿梭后,如果当前框内数据不足currentPage页,则后退一页
      if (this.rightPageOption.total !== 0 && this.rightPageOption.total <= ((this.rightPageOption.currentPage - 1) * this.rightPageOption.pageSize)) {
        this.rightPageOption.currentPage--
      }
      // 3. 分页,也就是拿到正确的TransferDataList
      this.leftTransferDataList = this.handleData(this.leftAllDataList, this.leftPageOption)
      this.rightTransferDataList = this.handleData(this.rightAllDataList, this.rightPageOption)
      // this.$forceUpdate()
    },
    //搜索功能 
    searchFilter(type) {
      this[`${type}Search`] = this[`${type}Search`] ? this[`${type}Search`].trim() : ""
      let filterList = []
      // 没有搜索内容时,让未分页的经过筛选数据等于源数据
      if (!this[`${type}Search`]) {
        filterList = JSON.parse(JSON.stringify(this[`${type}OriginDataList`]))
      } else {
        filterList = this[`${type}OriginDataList`].filter((item) =>
          item.label?.includes(this[`${type}Search`])
        )
      }
      this.$set(this[`${type}PageOption`], 'total', filterList.length)
      this[`${type}AllDataList`] = filterList
      // 对过滤后的数据,分页
      this[`${type}TransferDataList`] = this.handleData(this[`${type}AllDataList`], this[`${type}PageOption`])
      this.$forceUpdate()
    },
    //搜索点击
    searchClick(value, type) {
      this.$set(this[`${type}PageOption`], 'currentPage', 1)
      this[`${type}Search`] = value
      this.searchFilter(type)
    },
    // 处理数据分页 allDataList-经过筛选的数据列表,pageOption-分页数据
    handleData(allDataList, pageOption) {
      let start = (pageOption.currentPage - 1) * pageOption.pageSize
      let end = (start + pageOption.pageSize)
      // >pageOption.total?pageOption.total:(start + pageOption.pageSize)
      let currentPageList = []
      currentPageList = allDataList.slice(start, end)
      return currentPageList
    },
    //跳页回调
    handleCurrentChange(val, type) {
      this.$set(this[`${type}PageOption`], 'currentPage', val)
      this[`${type}TransferDataList`] = this.handleData(this[`${type}AllDataList`], this[`${type}PageOption`])
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dropdown-menu__item {
  span{
    width: 100%;
    height: 100%;
  }
}
::v-deep .el-pager li.active {
  color: #004BAA;
}
::v-deep .el-pager li:hover, ::v-deep .el-pagination button:hover {
  color: #407ecf;
}
::v-deep .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #F5F7FA;
  color: #303133;
}
// 按钮禁用样式
::v-deep button.el-button.el-button--primary.el-button--small.is-disabled {
  background-color: #EFEFEF;
  border: 1px solid #CCC;
  color: #303133;
}
::v-deep button.el-button.el-button--primary.el-button--small.is-disabled:hover {
  background-color: #EFEFEF !important;
  border: 1px solid #CCC !important;
  color: #303133 !important;
}
.transfer {
  width: 100%;
  min-width: 680px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .card-box {
    width: 40%;
    min-width: 300px;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    overflow: hidden;
    background: #FFF;
  }
  .box-top {
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 40px;
    padding: 8px 12px 9px;
    background: #F5F7FA;
    border-bottom: 1px solid #EBEEF5;
    .icon-margin {
      font-size: 16px;
    }
    .total-tip {
      padding: 0 5px;
    }
    .title-tip {
      font-size: 16px;
      color: #303133;
      font-weight: 400;
    }
  }
  .box-content {
    width: 100%;
    border-bottom: 1px solid #EBEEF5;
    .search-margin {
      margin: 15px;
    }
    .checkbox-group {
      padding: 0 15px;
      height: 300px;
      overflow-x: hidden;
      overflow-y: auto;
      ::v-deep .el-checkbox{
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        align-items: center;
      }
      ::v-deep .el-checkbox__label {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .box-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 40px;
    padding-right: 15px;
  }
  .buttons-box {
    width: 18%;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    button {
      margin: 0 0 15px 0;
    }
  }
}
</style>

使用实例：

当前设置穿梭框最小宽度为680px，最大宽度由box-width定义的宽度决定

<template>
  <div>
    <my-transfer
      class="box-width"
      :titles="['待选列表', '已选列表']"
      :filterable="true"
      filterPlaceholder="请输入"
      :leftTransferData="deviceData"
      @transferChange="transferChange"
    ></my-transfer>
  </div>
</template>

<script>
//引入组件
import MyTransfer from '@/components/Transfer/index.vue'

export default {
  components: {
    MyTransfer,
  },
  data() {
    return {
      deviceData: [
        {label:'待选内容1',value:0},
        {label:'待选内容2',value:1},
        {label:'待选内容3',value:2},
        {label:'待选内容4',value:3},
        {label:'待选内容5',value:4},
        {label:'待选内容6',value:5},
        {label:'待选内容7',value:6},
        {label:'待选内容8',value:7},
        {label:'待选内容9',value:8},
        {label:'待选内容10',value:9},
        {label:'待选内容11',value:10},
        {label:'待选内容12',value:11},
        {label:'待选内容13',value:12},
        {label:'待选内容14',value:13},
        {label:'待选内容15',value:14},
        {label:'待选内容16',value:15},
        {label:'待选内容17',value:16},
        {label:'待选内容18',value:17},
        {label:'待选内容19',value:18},
      ],
      chooseDeviceList: [],
    }
  },
  methods: {
    // 获取最新的右侧数据
    transferChange(data) {
      this.chooseDeviceList = data
    },
  }
}
</script>
<style scoped>
/* 盒子宽度 */
.box-width {
  width: 1000px;
}
</style>

莫宛

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
封装element穿梭框，包含前端分页，查询，全选所有，全选当页，反选功能

利用element组件封装了一个包含前端分页，查询，全选所有，全选当页，反选功能的穿梭框。当前设置穿梭框最小宽度为680px，最大宽度由box-width定义的宽度决定。
复制链接

扫一扫