时间:2021-05-26
芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能;
原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs
首先安装
sudo npm i sortablejs --save-devhtml代码
<template> <el-transfer ref="transfer" id="transfer" v-model="value" :data="data"> <span slot-scope="{ option }" :draggable="!option.disabled" @dragstart="drag($event,option)">{{ option.key }} - {{ option.label }}</span> </el-transfer></template>```create
<script> import Sortable from 'sortablejs' export default { data() { const generateData = _ => { const data = []; for (let i = 1; i <= 15; i++) { data.push({ key: i, label: `备选项 ${i}`, disabled: i % 4 === 0 }); } return data; }; return { data: generateData(), value: [1, 4], draggingKey : null } }, mounted() { 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.value[oldIndex] if (!temp || temp === 'undefined') { return }// 解决右边最后一项从右边拖左边,有undefined的问题 this.$set(this.value,oldIndex,this.value[newIndex]) this.$set(this.value,newIndex,temp) } }) const leftEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0] Sortable.create(leftEl,{ onEnd: (evt) => { const {oldIndex,newIndex} = evt; const temp = this.data[oldIndex] if (!temp || temp === 'undefined') { return } // 解决右边最后一项从右边拖左边,有undefined的问题 this.$set(this.data,oldIndex,this.data[newIndex]) this.$set(this.data,newIndex,temp) } }) leftPanel.ondragover = (ev) => { ev.preventDefault() } leftPanel.ondrop = (ev) => { ev.preventDefault(); const index = this.value.indexOf(this.draggingKey) if(index !== -1){ this.value.splice(index,1) } } rightPanel.ondragover = (ev) => { ev.preventDefault() } rightPanel.ondrop = (ev) => { ev.preventDefault(); if(this.value.indexOf(this.draggingKey) === -1){ this.value.push(this.draggingKey) } } }, methods: { drag(ev,option) { this.draggingKey = option.key } } } </script>到此这篇关于vue element el-transfer增加拖拽功能的文章就介绍到这了,更多相关element el-transfer拖拽内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
背景1、vue项目中的表格需要实现行拖拽功能2、表格使用element组件库中el-table方案介绍Sortable.js介绍:Sortable.js是一款轻
本文给大家介绍vue使用sortable实现el-table拖拽排序功能,具体内容如下所示:npm下载:npminstallsortablejs--save引入
Vue+Element-UI上传图片并压缩,供大家参考,具体内容如下1.版本Vue:2.5.2Element-UI:2.12.0可实现图片上传前,自动压缩。El
Transfer穿梭框按需引入Transfer编辑main.jsimport{...Transfer}from'element-ui';constcompone
原因:autofocus是vue中input的原生属性,element也支持这种方法,但是element中的el-input组件外面还有其他组件,导致autof