vue 穿梭框,vue浮动框
本文主要详细介绍vue梭箱的上下移动。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue梭箱上下移动的具体代码，供大家参考。具体内容如下
使用elementUI树组件的树组件
功能需求：
1.左侧的子节点被移动到右侧的表中。
2.将右侧选中的内容移动到左侧树中，有单个移动和全部移动。
3.单击右侧节点可以上下移动。
我们会遇到的第一个问题可能是如何让左侧的子节点只显示复选框。我这边可以根据后端返回的一个参数来判断是不是父节点(其实后端只要给父节点加一个nocheck=true就可以了)。
//setLeftAgency:封装的请求接口名称。
Setleftagency (params)。然后((RES)={//当返回的代码==0时，表示成功。
if (res.data.code==0) {
设{ data }=res.data
Data.forEach((Item)={//遍历返回的数据。如果在此参数为item时将nocheck=true添加到当前数据，则不会显示复选框。
如果(项。打字！==Item){
item.nocheck=true
}
//删除item.children
});
this.parentNodes=data//将修改后的数据放入数组中，然后渲染。
}
左边树形结构，中间按钮，右边表格(左边树形结构和表格打包直接导入)
class= left tree //onCreated bound这里是左树的初始化函数，parentNodes存储左树的所有数据。
ztree:setting= setting @ onCreated= onCreated :parent nodes= parent nodes /ztree
/div
div class=centerBtn
El-button type= danger plain icon= El-icon-arrow-right @ click= move table /El-button
El-button type= danger plain icon= El-icon-d-arrow-left @ click= move treeall /El-button
El-button type= danger plain icon= El-icon-arrow-left @ click= move tree /El-button
El-button type= danger plain @ click= move up(index)上移/el-button
El-button type= danger plain @ click= move down(index)下移/el-button
/div
div class=rightTable
Table :data.sync=tableData //表接口返回的数据
ref=personListSettingPage
:loading=vxeLoading
V-model=selectGroups //绑定右表中选定项的数组
id=personListSettingPage
:showPagination=false
:height-full-screen=false
@sort-change=sortChange
@ checkbox-change=选择更改/在右侧选择单选事件
@checkbox-all=selectAll //选择右侧所选项目的所有事件
@ data-refresh= gettable data()//获取右边表格数据的函数
vxe-表格-列type= checkbox width= 60 align= center /vxe-表格-列
table-column field= text show-overflow= title title=所选指示器 filterType=
/表格-列
/表格
/div
使用的参数
移动ID: ，//向下移动时存储的数据
MoveUpId: ，//上移时遍历右表数据中存储的数据。
SelectGroups:[]，//用于存储右边选中的数据。
TableData:[]，//请求返回后，左侧的所有数据都会存放在这个数组中。
ParentNodes:[]，//左树的所有数据
treeObj: ，
左边的树初始化和右边的表复选框选择事件。
//初始化ztree
onCreated(treeObj){
this.treeObj=treeObj
let nodes=this . tree obj . getcheckednodes(true)；
},
//复选框事件
选择更改({已检查，记录}) {
This.selectGroups=records //将选定的数据存储到数组中
},
//复选框选择所有事件
选择全部({选中，记录}) {
this.selectGroups=记录
},
上移
上移(索引){
if(this . select groups . length 0){//确定右侧是否有选中的项目。
让goOrnot=true
this . selectgroups . find((seitem)={//遍历右侧选项卡中选定的项目以查找相应的id
if(seitem . id==this . move up id . id){
这个。$ message . warning(this . move upid . text 此行没有向上移动的空间)
goOrnot=false
}
})
if(goOrnot){
This.tabledata.foreach ((item，index)={//遍历右表中的所有数据，
这个. set(item， rowIndex ，index) //由于受Java脚本语言的限制，vue.js不能监听对象属性的添加和删除，所以要使用$set或者对象.分配(目标，源),这样试图才会更新
})
让标志=真
this.selectGroups.forEach((val，index2)={
this.tableData.find((itm，ind)={
if(val.id==itm.id){
if(itm.rowIndex==0){ //遍历右侧选中数据和所有数据相对比，如果编号相同，在判断刚刚添加的行索引属性值是多少
这个 message.warning(itm.text 此行没有上移的空间了)
this.moveUpId=itm //把当前这条数据存起来
标志=假
返回
}否则{
if(flag){ //此时可以对多条数据进行移动了
让改变item=JSON。解析(JSON。stringify(这个。表数据[ITM。行索引-1])
这个。表格数据。拼接(ITM。rowindex-1，1)；
这个。表格数据。拼接(ITM。rowindex，0，changeItem)
}
}
}
})
})
}
}否则{
这个message.warning(请选择要移动的数据)
}
},
下移
下移（索引){
if(this.selectGroups.length0){
让goOrnot=true
这个。选择组。查找((seItem)={
如果(seitem。id==这个。movedownid。id){
这个$消息。警告(这个。movedownid。文本此行没有下移的空间了)
goOrnot=false
}否则{
this.moveFlag=true
}
})
if(goOrnot){
this.tableData.forEach((item，index)={
这个. set(item， rowIndex ，Index)
})
让select data=JSON。解析(JSON。stringify(这个。表数据))
让a=[.this.selectGroups]
答。反转()。forEach((val，index2)={
selectData.find((itm，ind)={
if(val.id==itm.id){
如果(ITM。rowindex==选择数据。长度-1){
这个 message.warning(itm.text 此行没有下移的空间了)
this.moveDownId=itm
this.moveFlag=false
}否则{
if(this.moveFlag){
let changeItem=itm
让de lindex=选择数据。查找索引(I=I . id==更改项目。id)
this.tableData.splice(delIndex，1)；
这个。表格数据。拼接(delIndex 1，0，changeItem)
这个10.10 $ refs . personlistsettingpage。桌子。setcheckboxrow(this。表数据[ITM。rowindex 1]，true) //给右侧桌子加了一个ref=personListSettingPage
}
}
}
})
})
}
}否则{
这个message.warning(请选择要移动的数据)
}
}
表格移动到树
/* 移入树*/
moveTree(){
if(this.selectGroups.length0){
这个。选择组。foreach(item={
this.parentNodes.find(val={
if(val.id==item.pid){
/* 添加节点*/
设node=this。树对象。getnodebyparam( id ，val.id，null)；
this.treeObj.addNodes(节点，项目)
/* 取消新增节点的选中状态*/
设取消节点=this。树对象。getnodebyparam( id ，item.id，null)；
这个。树对象。checknode(取消节点，假，真)；
}
})
这个。表格数据。拼接(这个。表格数据。查找索引(val=val。id===item。id)，1)
})
}否则{
这个message.warning(请选择要移动的数据)
}
},
树移到表格
/* 移入表格*/
moveTable(){
设arr=[]
设nodes=this。树对象。getcheckednodes(true)；
if(nodes.length0){
nodes.forEach(item={
this.tableData.find(val={
数组推送(值id)
})
if(arr.indexOf(item.id)-1)返回此message.error(数据重复，请勿重新添加)
this.treeObj.removeNode(item)
这个。表格数据。推(这个。filter obj(item，[checked ， codeSetId ， Id ， img ， infoItemFlag ， isMult ， itemType ， locked ， Mult ， orgCode ， pid ， sort ， syrs ， text ])//调用下面的方法，去除多余字段
})
}否则{
这个message.warning(请勾选数据)
}
},
封装的过滤字段
/* 过滤对象多余字段*/
filterObj(obj，arr) {
常量结果={}
Object.keys(obj).filter((key)=arr.includes(key)).forEach((key)={
结果[关键字]=对象[关键字]
})
回送结果
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。