element穿梭框el-transfer增加拖拽排序和shift多选checkbox功能
<template>
<div class="demo">
<el-transfer
v-model="value"
filterable
:data="data"
:filter-method="filterMethod"
:target-order="'push'"
:titles="['左边数据', '右边数据']"
:props="{ key: 'id', label: 'label' }"
:left-default-checked="hasCheckedWHLeftData"
@left-check-change="handleWHLeftChange"
:right-default-checked="hasCheckedWHRightData"
@right-check-change="handleWHRightChange"
></el-transfer>
</div>
</template>
<script>
import Sortable from "sortablejs";
const generateData = () => {
const data = [];
for (let i = 1; i <= 30; i++) {
data.push({
id: i,
label: `备选项 ${i}`
});
}
return data;
};
export default {
name: "DragSortMultiSelect",
data() {
return {
filterMethod(query, item) {
let regStr = query.replace(/\*/g, ".*");
let reg = new RegExp(regStr);
return reg.test(item.label);
},
data: generateData(),
value: [4, 2, 1],
shiftKey: false,
firstWHLeftLocation: -1, //数据左边起始值
lastWHLeftLocation: -1, //数据左边终止值
hasCheckedWHLeftData: [], //数据左边选中的数据
firstWHRightLocation: -1, //数据右边起始值
lastWHRightLocation: -1, //数据右边终止值
hasCheckedWHRightData: [] //数据右边选中的数据
};
},
mounted() {
window.addEventListener("keydown", e => {
if (e.keyCode === 16 && e.shiftKey) {
this.shiftKey = true;
}
});
window.addEventListener("keyup", e => {
this.shiftKey = false;
});
let el = document
.querySelector(".el-transfer")
.querySelectorAll(".el-checkbox-group")[1];
new Sortable(el, {
forceFallback: false,
onUpdate: event => {
let box = this.$el
.querySelector(".el-transfer")
.querySelectorAll(".el-checkbox-group")[1];
let nums = this.$el
.querySelector(".el-transfer")
.querySelectorAll(".el-checkbox-group")[1].childNodes.length;
console.log(nums, event.newIndex);
if (event.newIndex >= nums) {
return;
}
let newIndex = event.newIndex;
let oldIndex = event.oldIndex;
let $label = box.children[newIndex];
let $oldLabel = box.children[oldIndex];
box.removeChild($label);
if (newIndex < oldIndex) {
box.insertBefore($label, $oldLabel);
} else {
box.insertBefore($label, $oldLabel.nextSibling);
}
let item = this.value.splice(oldIndex, 1);
this.value.splice(newIndex, 0, item[0]);
}
});
},
methods: {
// 数据左侧列表元素被用户选中 / 取消选中时触发
handleWHLeftChange(key, key1) {
var _this = this;
console.log(_this.hasCheckedWHLeftData);
_this.hasCheckedWHLeftData = _this.commonChangeFuc(
key,
key1,
_this.hasCheckedWHLeftData,
_this.firstWHLeftLocation,
_this.lastWHLeftLocation,
_this.data,
"id"
);
console.log(_this.hasCheckedWHLeftData);
},
// 数据右侧列表元素被用户选中 / 取消选中时触发
handleWHRightChange(key, key1) {
var _this = this;
console.log(_this.hasCheckedWHRightData);
_this.hasCheckedWHRightData = _this.commonChangeFuc(
key,
key1,
_this.hasCheckedWHRightData,
_this.firstWHRightLocation,
_this.lastWHRightLocation,
_this.value,
false
);
console.log(_this.hasCheckedWHRightData);
},
// 公共按住shift 多选
commonChangeFuc(
key,
key1,
hasCheckedData,
firstLocation,
lastLocation,
arrList,
value
) {
var _this = this;
var cFlag = false; //取消勾选
// debugger
for (var i = 0; i < key.length; i++) {
if (key[i] == key1[0]) {
cFlag = true; //选中
}
}
if (cFlag) {
if (key.length == 1) {
firstLocation = 0;
hasCheckedData.push(key[0]);
} else if (key.length > 1) {
let arr = [];
// 当前有选中数据 并且 按住shift
if (_this.shiftKey) {
// if (isRight) {
for (let i = 0; i < arrList.length; i++) {
let item = value ? arrList[i][value] : arrList[i];
if (item == key[key.length - 2]) {
firstLocation = i;
}
if (item == key1[0]) {
lastLocation = i;
}
}
if (firstLocation != -1 && lastLocation != -1) {
if (firstLocation < lastLocation) {
for (var k = 0; k < arrList.length; k++) {
let item = value ? arrList[k][value] : arrList[k]; if (k >= firstLocation && k <= lastLocation) {
hasCheckedData.push(item);
}
}
} else if (firstLocation > lastLocation) {
for (var k = 0; k < arrList.length; k++) {
if (k >= lastLocation && k <= firstLocation) {
hasCheckedData.push(item);
}
}
}
}
} else {
//不再按shift
hasCheckedData.push(key1[0]);
}
}
} else {
//取消选中的
hasCheckedData = [];
for (var i = 0; i < key.length; i++) {
if (key[i] != key1[0]) {
hasCheckedData.push(key[i]);
}
}
}
// 去重
hasCheckedData = new Set(hasCheckedData);
hasCheckedData = Array.from(hasCheckedData);
return hasCheckedData;
}
}
};
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
/deep/ .el-transfer__buttons {
/deep/ button {
display: block;
margin: 0;
&:first-child {
margin-bottom: 12px;
}
}
} .demo {
text-align: left;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
text-align: left;
width: 300px;
height: 300px;
background-color: #42b983;
overflow: scroll;
}
li {
display: block;
margin: 20px 10px;
border: 1px solid #444;
}
a {
color: #42b983;
}
</style>
element穿梭框el-transfer增加拖拽排序和shift多选checkbox功能的更多相关文章
- el-transfer增加拖拽功能
el-transfer增加拖拽排序,左右互相拖拽功能: npm i sortablejs <template> <el-transfer ref="transfer&quo ...
- php接口实现拖拽排序功能
列表拖拽排序是一个很常见的功能,但是后端接口如何处理却是一个令人纠结的问题 如何实现才能达到效率最高呢 先分析一个场景,假如有一个页面有十条数据,所谓的拖拽就是在这十条数据来来回回的拖,但是每次拖动都 ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- vue el-transfer新增拖拽排序功能---sortablejs插件
<template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 - --> ...
- 使用knockout-sortable实现对自定义菜单的拖拽排序
在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...
- jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
- RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图 代码分析 ItemTouchHel ...
- odoo开发笔记-tree列表视图拖拽排序
odoo列表tree视图 拖拽排序 实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 &qu ...
- vue列表拖拽排序功能实现
1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...
随机推荐
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片:图片响应式 (将很好地扩展到父元素)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- POJ 3268:Silver Cow Party 求单点的来回最短路径
Silver Cow Party Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 15989 Accepted: 7303 ...
- Scala match 变量
昨天写 Scala 的时候,使用 match(相当于 switch)时,运行结果很奇怪. var i: Int = 0 while (i < items.length) { i % width ...
- mysql实现ORACLE的connect by prior父子递归查询
oracle中有connect by prior ,可以实现父子递归查询.而mysql中没有这种功能,但我们可以变通实现. 比如一个表: Table Name: tb_Tree Id | Parent ...
- Hive 中的 order by, sort by, distribute by 与 cluster by
Order By order by 会对输入做全排序, 因此只有一个Reducer(多个Reducer无法保证全局有序), 然而只有一个Reducer, 会导致当输入规模较大时, 消耗较长的计算时间. ...
- <深入理解redis>读书笔记
chapter2 键管理与数据结构 对大多数redis解决方案而言,键的命名设计至关重要.对于管理来说,内存消耗和redis性能都与数据结构设计相关.所以对开发者而言,最好有数据结构的命名文档规范. ...
- Linux 安装gcc g++
Linux版本: cat /proc/version Linux version 3.10.0-693.11.6.el7.x86_64 (mockbuild@x86-041.build.eng.bos ...
- cf 764A、762A、764B
颓废题 764A #include<bits/stdc++.h> #define LL long long #define N 100005 #define lowbit(x) x& ...
- STM32中ARM系列编译工具链的编译宏选择(__CC_ARM、__ICCARM__、__GNUC__、__TASKING__)
一 前言 stm32 f103中.关系到一个选择何种编译宏的问题.这里就梳理一下吧. 二 正文 1 在 core_cm3.h 文件中,有如下代码: #if defined ( __CC_ARM ) ...
- 五十九、SAP中常用预定义系统变量
一.SAP中常用预定义系统变量 内容如下: 二.系统变量定义在结构SYST里,我们打开SE38 三.在代码编辑器输入SYST变量 四.双击SYST,来到这个系统结构,里面有很多系统变量 五.我们随便写 ...