• 售前

  • 售后

热门帖子
入门百科

vue element el-transfer增加拖拽功能

[复制链接]
嘉熙莫多多ir 显示全部楼层 发表于 2021-10-25 19:26:45 |阅读模式 打印 上一主题 下一主题
芯资管项目要求el-transfer增长拖拽排序,左右上下互相拖拽功能;
原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs
起首安装
  1. sudo npm i sortablejs --save-dev
复制代码
html代码
  1.   <template>
  2.   <el-transfer ref="transfer" id="transfer" v-model="value" :data="data">
  3.    <span slot-scope="{ option }" :draggable="!option.disabled" @dragstart="drag($event,option)">{{ option.key }} - {{ option.label }}</span>
  4.   </el-transfer>
  5. </template>```
复制代码
create
  1.   <script>
  2.    import Sortable from 'sortablejs'
  3.    export default {
  4.       data() {
  5.         const generateData = _ => {
  6.           const data = []; for (let i = 1; i <= 15; i++) {
  7.             data.push({
  8.               key: i,
  9.               label: `备选项 ${i}`,
  10.               disabled: i % 4 === 0 });
  11.           } return data;
  12.         }; return {
  13.           data: generateData(),
  14.           value: [1, 4],
  15.           draggingKey : null }
  16.       },
  17.       mounted() {
  18.         const transfer = this.$refs.transfer.$el
  19.         const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0];
  20.         const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0];
  21.         const rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0]
  22.         Sortable.create(rightEl,{
  23.           onEnd: (evt) => {
  24.             const {oldIndex,newIndex} = evt;
  25.             const temp = this.value[oldIndex]
  26.             if (!temp || temp === 'undefined') {
  27.               return
  28.             }// 解决右边最后一项从右边拖左边,有undefined的问题
  29.             this.$set(this.value,oldIndex,this.value[newIndex])  
  30.             this.$set(this.value,newIndex,temp)
  31.           }
  32.         })
  33.         const leftEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0]
  34.         Sortable.create(leftEl,{
  35.           onEnd: (evt) => {
  36.             const {oldIndex,newIndex} = evt;
  37.             const temp = this.data[oldIndex]
  38.             if (!temp || temp === 'undefined') {
  39.               return
  40.             } // 解决右边最后一项从右边拖左边,有undefined的问题
  41.             this.$set(this.data,oldIndex,this.data[newIndex])
  42.             this.$set(this.data,newIndex,temp)
  43.           }
  44.         })
  45.         leftPanel.ondragover = (ev) => {
  46.           ev.preventDefault()
  47.         }
  48.         leftPanel.ondrop = (ev) => {
  49.           ev.preventDefault();
  50.           const index = this.value.indexOf(this.draggingKey) if(index !== -1){ this.value.splice(index,1)
  51.           }
  52.         }
  53.         rightPanel.ondragover = (ev) => {
  54.           ev.preventDefault()
  55.         }
  56.         rightPanel.ondrop = (ev) => {
  57.           ev.preventDefault();  if(this.value.indexOf(this.draggingKey) === -1){ this.value.push(this.draggingKey)
  58.           }
  59.         }
  60.       },
  61.       methods: {
  62.         drag(ev,option) { this.draggingKey = option.key
  63.         }
  64.       }
  65.     }
  66. </script>
复制代码
到此这篇关于vue element el-transfer增长拖拽功能的文章就介绍到这了,更多相干element el-transfer拖拽内容请搜索草根技术分享从前的文章或继续欣赏下面的相干文章希望大家以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作