vue2 element el-transfer穿梭框组件支持拖拽及排序 已封装,随取随用

项目场景:

项目中有个功能用到穿梭框组件,新版本需要支持穿梭框组件排序,由于element2版本中的穿梭框组件本身不支持排序功能

在此不仅需要支持随意更换顺序,还支持从一侧拖拽至另一侧,具体功能效果图如下:
在这里插入图片描述
啊啊啊对不住哈哈,GIF过于模糊,自行脑补吧,临时没找到免费的视频转GIF


穿梭框组件封装代码如下

提示:关于拖拽部分代码是基于其他大佬的基础上稍作修改,原博文地址:[https://blog.csdn.net/juvenile_Li/article/details/126886010?spm=1001.2014.3001.5506]

Tips1: 此功能使用到了sortablejs插件,请务必先下载本插件再引用下面的代码,sortablejs安装命令为:npm install sortablejs --save

Tips2: 下面的代码中引入的其他方法请自行根据自己的项目进行修改,比如:错误提示Messagebox

//先看封装好的组件,此处我们是加了弹框的,如果不需要自行修改去掉即可
<template>
    <div class="delete-info-dialog">
        <el-dialog
            :title="dialogTitle"
            :visible.sync="tableItemDialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="700px"
            :before-close="handleClose">
            <div class="info-body">
                <el-transfer ref="transfer"
                             v-model="visibleValue"
                             :data="transferData"
                             :titles="transferTitle"
                             target-order="push"
                             :props="transferProps"
                             @left-check-change="leftCheckChange"
                             @right-check-change="rightCheckChange"
                             >
                      <span slot-scope="{ option }"
                            draggable="!option.disabled"
                            @dragstart="drag($event, option)"
                      >
                        {{ option.label }}
                      </span>
                </el-transfer>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Sortable from 'sortablejs' //记得安装拖拽组件哦
import cloneDeep from "lodash.clonedeep"; //这个是深拷贝方法,也可以换成自己的,也可以下载lodash,此处为了避免修改父组件传过来的数据
export default {
    name: "visible-item-table-dialog",
    props: {
      //此处是可以随意定义弹框的文字,且有默认值
      dialogTitle: {
        type: String,
        default: '显示列设置'
      },
      //此处是可以定义transfer组件的props
      transferProps: {
        type: Object,
        default: {
            key: 'key',
            label: 'label',
        }
      },
      //此处是可以定义transfer组件的title
      transferTitle: {
        type: Array,
        default: ()=> ['隐藏列', '显示列']
      },
      // 穿梭框总数据
      transferDataList: {
        type: Array,
        default: ()=> []
      },
      // 右侧显示列,用户已经选好保存过的数据,从父组件传过来回显
      visibleTableItemList: {
        type: Array,
        default: ()=> []
      },
      // 默认显示列,如果用户还没设置过则取这个
      defaultTableItemList: {
        type: Array,
        default: ()=> []
      },
      // 控制弹框显隐
      tableItemDialogVisible: {
        type: Boolean,
        default: false
      },
    },
    data() {
        return {
            visibleValue: [],//显示列表头数据
            transferData: [], // 穿梭框数据
            transferLeftCheckData: [], // 左侧选中数据
            transferRightCheckData: [], // 右侧选中数据
            draggingKey: '',  // 当前拖拽项
        }
    },
    mounted() {
      this.transferData = this.transferDataList;
      this.visibleValue = this.visibleTableItemList.length>0 ?cloneDeep(this.visibleTableItemList) : cloneDeep(this.defaultTableItemList);
      // 此处加nextTick 为了保证顺利取到refs
      this.$nextTick(()=>{
        const transfer = this.$refs.transfer.$el;
        const leftPanel = transfer.getElementsByClassName('el-transfer-panel')[0].getElementsByClassName('el-transfer-panel__body')[0]
        const rightPanel = transfer.getElementsByClassName('el-transfer-panel')[1].getElementsByClassName('el-transfer-panel__body')[0]
        const rightEl = rightPanel.getElementsByClassName('el-transfer-panel__list')[0]
        Sortable.create(rightEl, {
          onEnd: evt => {
            const { oldIndex, newIndex } = evt
            const temp = this.visibleValue[oldIndex]
            if (!temp || temp === 'undefined') {
              return
            } // 解决右边最后一项从右边拖左边,有undefined的问题
            // this.$set(this.visibleValue, oldIndex, this.visibleValue[newIndex]) //这种赋值方法会导致数据更新视图未更新,排序后顺序展示错乱,强制更新也无效,原博主是这么赋值的,仅供参考
            // this.$set(this.visibleValue, newIndex, temp)
              let _arr = this.visibleValue.splice(oldIndex, 1)
              this.visibleValue.splice(newIndex, 0, _arr[0])
          }
        })
        // 目前只让右侧支持拖拽顺序即可,左侧暂时注释
        const leftEl = leftPanel.getElementsByClassName('el-transfer-panel__list')[0]
        Sortable.create(leftEl, {
          onEnd: evt => {
            const { oldIndex, newIndex } = evt
            const temp = this.transferData[oldIndex]
            if (!temp || temp === 'undefined') {
              return
            } // 解决右边最后一项从左边拖右边,有undefined的问题            
              let _arr = this.transferData.splice(oldIndex, 1)
              this.transferData.splice(newIndex, 0, _arr[0])
          }
        })

        // 关于左侧拖拽至右侧的功能,在本项目中暂时无法实现,经检测drag事件未触发(除了本项目外都可),后续再研究^_^
        leftPanel.ondragover = ev => ev.preventDefault()
        leftPanel.ondrop = ev => {
          ev.preventDefault()
          // 往左拉
          const index = this.visibleValue.indexOf(this.draggingKey)
          if (index !== -1) {
            // 如果当前拉取的是选中数据就将所有选中的数据拉到左边选中框内
            if (this.transferRightCheckData.indexOf(this.draggingKey) !== -1) {
              // 此处为多选执行
              this.transferRightCheckData.reduce((arr, item) => {
                if (arr.indexOf(item) !== -1) {
                  // 每次计算将相同的删掉
                  arr.splice(arr.indexOf(item), 1)
                }
                return arr
              }, this.visibleValue)
              this.transferRightCheckData = []// 清除右侧选中的 不然下次向左拉取时会有缓存
              // 否则就只拉取当前一个
            } else {
              this.visibleValue.splice(index, 1)
            }
          }
        }
        rightPanel.ondragover = ev => ev.preventDefault()
        rightPanel.ondrop = ev => {
          ev.preventDefault()
          if (!this.draggingKey || this.draggingKey === 'undefined') {
            return
          } // 解决右边最后一项从左边拖右边,有undefined的问题
          // 右边框里没有当前key值的时候 向右拉
          if (this.visibleValue.indexOf(this.draggingKey) === -1) {
            // 此处为多选执行
            // 如果当前拉取的是选中数据就将所有选中的数据拉到右边选中框内
            if (this.transferLeftCheckData.indexOf(this.draggingKey) !== -1) {
              this.visibleValue =
                this.visibleValue.concat(this.transferLeftCheckData)
              this.transferLeftCheckData = [] // 清除左侧选中的  不然下次向右拉取时会有缓存
            } else {
              // 否则就只拉取当前一个
              this.visibleValue.push(this.draggingKey)
            }
          }
        }
      })
    },
    methods: {
        //关闭弹框
        handleClose(){
            this.$emit("handleCloseTableItem");
        },
        //点击确定按钮
        handleConfirm(){
            if(this.visibleValue.length<=0){
                this.$message({
		          message: '未选中任何需要显示的数据',
		          type: 'warning'
		        });
                return;
            }
            this.$emit("handleConfirmVisible",this.visibleValue)
        },
      drag(ev, option) {
        // 赋值当前拖拽的唯一标识
        this.draggingKey = option[this.transferProps.key]
      },
      leftCheckChange(val) {
        // 穿梭框左侧多选选中
        this.transferLeftCheckData = [...val]
      },
      rightCheckChange(val) {
        // 穿梭框右侧多选选中
        this.transferRightCheckData = [...val]
      },
    },
}
</script>

<style lang="scss" scoped>
.delete-info-dialog{
    /deep/ .el-dialog__body{
        max-height: 400px;
        overflow-y: auto;
    }
    .info-body{
        color: #909399;
        padding-top: 20px;
        padding-bottom: 20px;
        .success-info{
            height: 20px;
            line-height: 20px;
        }
        .info-list{
            .info{
                padding: 0 10px;
                line-height: 20px;
                word-break: break-all;
            }
        }

    }
}
</style>



封装组件的应用:

提示:上面的代码是封装好的支持拖拽的穿梭框,且在弹框内哦,不在弹框内的自己修改下吧O(∩_∩)O哈哈~:

第一步:在需要的页面引入封装好的组件
//此处用Button触发弹框打开,不需要弹框的省略
<el-button @click="tableItemDialogVisible= true">打开封装好的穿梭框组件弹框</el-button>

<visible-dialog
            :default-table-item-list="defaultTableItemList"
            :table-item-dialog-visible="tableItemDialogVisible"
            v-if="tableItemDialogVisible"
            :visible-table-item-list="visibleTableItemList"
            :transfer-data-list="transferDataList"
            :transfer-props="{key: 'property',label: 'label',}"
            @handleCloseTableItem="handleCloseTableItem"
            @handleConfirmVisible="handleConfirmVisible"
        ></visible-dialog>

<script>
import VisibleDialog from "../../../components/visible-dialog/index.vue"; //记得修改地址哦,这里引入的就是上面那个封装好的组件,地址务必改为自己的哈,文件名也记得改为自己的哈
export default {   
	components: {
		VisibleDialog 
	},
	data(){
            return {               
                tableItemDialogVisible: true,//显隐弹框
                defaultTableItemList: ['date', 'invoiceClass', 'invoiceCode', 'invoiceNum', 'isTravel'],//如果visibleTableItemList为空,直接取defaultTableItemList的值,这个逻辑可根据自己需要自行修改
                transferDataList: [
               		 {label: '销售方名称', property: 'salename', align:'left', minWidth: 180},
					 {label: '销售方税号', property: 'saleaxpayerid', align:'left', minWidth: 180},
					 {label: '购买方税号', property: 'buytaxnumber', align:'left', minWidth: 180},
               		{label: '发票日期', property: 'date', minWidth: 120,},
				    {label: '发票类型', property: 'invoiceClass', minWidth: 180,},
				    {label: '发票代码', property: 'invoiceCode', minWidth: 180,},
				    {label: '发票号码', property: 'invoiceNum', minWidth: 180,},
				    {label: '是否差旅', property: 'isTravel', minWidth: 120},
                ],
                visibleTableItemList: [],//这个数组的数据是从后来请求回来的,用户自己设置好顺序的数据,如果没有设置就会去取defaultTableItemList里面的数据,这个demo中咱们就默认为空,假装用户还没设置过哈
            }
        },
        methods: {
			//  关闭显示列弹框
            handleCloseTableItem(){
                this.tableItemDialogVisible = false;
            },
            
            // 点击弹框的确认按钮事件,array就是用户自己放在右侧排好序的数组,
            handleConfirmVisible(array){
            	console.log("用户选择好的右侧的数据",array)
              // 这里就可以向后端发送请求,保存用户排好序的数据了
            },
        }
        
}
</script>

结语:

提示:按照上述代码复制到自己项目中即可实现顶部GIF中的功能了,如有问题,欢迎留言交流,欢迎大佬指点。

  • 8
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

【拾光静好 微微一笑】

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值