vue穿梭框实现上下移动


Posted in Vue.js onJanuary 29, 2021

本文实例为大家分享了vue穿梭框实现上下移动的具体代码,供大家参考,具体内容如下

使用elementUI的树形组件 tree组件

vue穿梭框实现上下移动

功能需求:

1、左侧的子节点移动到右侧的表格中
2、右侧选中的内容移动到左侧树中,单一移动和全部移动
3、点击右侧节点实现上下移动

首先会遇到的问题可能是如何实现左侧只让子节点显示checkbox,我这边是根据后端返回了一个参数来判断是否是父节点(其实只要后端给父节点加一个nocheck=true就可以)

// setLeftAgency :封装好的请求接口名称
setLeftAgency(params).then((res) => { // 当返回的code==0时就意味着成功
 if (res.data.code == 0) {
 let { data } = res.data;
 data.forEach((item) => { //遍历返回的数据,如果当这个参数是Item时候就给当前这条数据加上nocheck=true,这样就不会显示checkbox
 if(item.Type!=='Item'){
  item.nocheck=true
 }
 // delete item.children;
 });
 this.parentNodes = data; // 把修改好的数据放在数组中再渲染
 }

左侧树结构,中间的按钮和右侧表格(左侧树结构和表格是封装好的,直接引入)

<div class="leftTree"> // 这里绑定的onCreated是左侧树的初始化函数,parentNodes储存了左侧树的所有数据
 <ztree :setting="setting" @onCreated = 'onCreated' :parentNodes="parentNodes"></ztree>
</div>
<div class="centerBtn">
 <el-button type="danger" plain icon="el-icon-arrow-right" @click="moveTable"></el-button>
 <el-button type="danger" plain icon="el-icon-d-arrow-left" @click="moveTreeAll"></el-button>
 <el-button type="danger" plain icon="el-icon-arrow-left" @click="moveTree"></el-button>
 <el-button type="danger" plain @click="moveUp(index)">上移</el-button>
 <el-button type="danger" plain @click="moveDown(index)">下移</el-button>
</div>

<div class="rightTable">
 <table :data.sync="tableData" // 表格接口返回的数据
  ref="personListSettingPage"
  :loading='vxeLoading'
  v-model="selectGroups" // 绑定右侧table选中项的数组
  id="personListSettingPage"
  :showPagination= 'false'
  :height-full-screen = 'false'
  @sort-change="sortChange"
  @checkbox-change="selectChange" // 右侧选中的单选事件
  @checkbox-all="selectAll" // 右侧选中项的全选事件
  @data-refresh="getTableData()"> // 获取右侧表格数据的函数
  <vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
  <table-column field="text" show-overflow="title" title="已选指标" filterType='' >
  </table-column>
 </table>
 </div>

用到的参数

moveDownId:"", //下移时储存的数据
moveUpId:"", //上移时遍历右侧表格数据储存的数据
selectGroups:[], // 用来存放右侧选中的数据
tableData:[], // 请求回来后会把左侧的所有数据存放在此数组中
parentNodes:[], //左侧树的所有数据
treeObj:"",

左侧树初始化和右侧表格复选框选择事件

// 初始化ztree
 onCreated(treeObj){
 this.treeObj = treeObj
 let nodes = this.treeObj.getCheckedNodes(true); 
},
 //复选框事件
 selectChange({ checked, records}) {
 this.selectGroups = records // 把选择的那条数据存储到数组中
 },
 //复选框全选事件
 selectAll({ checked, records }) {
 this.selectGroups = records
 },

上移

moveUp(index){
 if(this.selectGroups.length>0){ // 判断右侧是否有选中的项
 let goOrnot = true
 this.selectGroups.find((seItem)=>{ //遍历右侧tab中选中的项,找到对应的id
  if(seItem.id==this.moveUpId.id){
  this.$message.warning(this.moveUpId.text+"此行没有上移的空间了")
  goOrnot = false
  }
 })
 if(goOrnot){
  this.tableData.forEach((item,index)=>{ // 遍历右侧表格所有数据,
  this.$set(item,'rowIndex',index) //由于受JavaScript的限制,vue.js不能监听对象属性的添加和删除,所以要使用$set或者Object.assign(target, sources),这样试图才会更新
  })
  let flag = true
  this.selectGroups.forEach((val,index2)=>{
  this.tableData.find((itm,ind)=>{
   if(val.id==itm.id){
   if(itm.rowIndex==0){ // 遍历右侧选中数据和所有数据相对比,如果id相同,在判断刚刚添加的rowIndex属性值是多少
    this.$message.warning(itm.text+"此行没有上移的空间了")
    this.moveUpId = itm // 把当前这条数据存起来
    flag = false
    return
   }else{
    if(flag){ // 此时可以对多条数据进行移动了
    let changeItem = JSON.parse(JSON.stringify(this.tableData[itm.rowIndex-1]))
    this.tableData.splice(itm.rowIndex-1,1);
    this.tableData.splice(itm.rowIndex,0,changeItem)
    }
   }
   }
  })
  })
 }
 }else{
 this.$message.warning('请选择要移动的数据')
 }
},

下移

moveDown(index){
 if(this.selectGroups.length>0){
 let goOrnot = true
 this.selectGroups.find((seItem)=>{
  if(seItem.id==this.moveDownId.id){
  this.$message.warning(this.moveDownId.text+"此行没有下移的空间了")
  goOrnot = false
  }else{
  this.moveFlag = true
  }
 })
 if(goOrnot){
  this.tableData.forEach((item,index)=>{
  this.$set(item,'rowIndex',index)
  })
  let selectData = JSON.parse(JSON.stringify(this.tableData))
  let a=[...this.selectGroups]
  a.reverse().forEach((val,index2)=>{
  selectData.find((itm,ind)=>{
   if(val.id==itm.id){
   if(itm.rowIndex==selectData.length-1){
    this.$message.warning(itm.text+"此行没有下移的空间了")
    this.moveDownId = itm
    this.moveFlag = false
   }else{
    if(this.moveFlag){
    let changeItem = itm
    let delIndex=selectData.findIndex(i=>i.id == changeItem.id)
    this.tableData.splice(delIndex,1);
    this.tableData.splice(delIndex+1,0,changeItem)
    this.$refs.personListSettingPage.$refs.Table.setCheckboxRow(this.tableData[itm.rowIndex+1],true) // 给右侧table加了一个ref=personListSettingPage
    }
   }
   }
  })
  })
 }
 }else{
 this.$message.warning('请选择要移动的数据')
 }
}

表格移动到树

/* 移入tree */
moveTree(){
 if(this.selectGroups.length>0){
 this.selectGroups.forEach(item=>{
  this.parentNodes.find(val=>{
  if(val.id == item.pid){
   /* 添加节点 */
   let node = this.treeObj.getNodeByParam("id", val.id, null);
   this.treeObj.addNodes(node,item)
   /* 取消新增节点的选中状态 */
   let cancelNode = this.treeObj.getNodeByParam("id", item.id, null);
   this.treeObj.checkNode(cancelNode,false,true);
  }
  })
  this.tableData.splice(this.tableData.findIndex(val => val.id === item.id), 1)
 })
 }else{
 this.$message.warning('请选择要移动的数据')
 }
},

树移到表格

/* 移入表格 */
moveTable(){
 let arr=[]
 let nodes = this.treeObj.getCheckedNodes(true);
 if(nodes.length>0){
 nodes.forEach(item=>{
  this.tableData.find(val=>{
  arr.push(val.id)
  })
  if(arr.indexOf(item.id)>-1) return this.$message.error("数据重复,请勿重新添加")
  this.treeObj.removeNode(item)
  this.tableData.push(this.filterObj(item,["checked","codeSetId",'id','img','infoItemFlag','isMult','itemType','locked','mult','orgCode','pid','sort','syrs','text'])) // 调用下面的方法,去除多余字段
 })
 }else{
 this.$message.warning('请勾选数据')
 }
},

封装的过滤字段

/* 过滤对象多余字段 */
filterObj(obj, arr) {
 const result = {}
 Object.keys(obj).filter((key) => arr.includes(key)).forEach((key) => {
 result[key] = obj[key]
 })
 return result
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 #Vue.js
Vue ​v-model相关知识总结
Jan 28 #Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 #Vue.js
vscode自定义vue模板的实现
Jan 27 #Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 #Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 #Vue.js
You might like
php异常处理技术,顶级异常处理器
2012/06/13 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
python中pycurl库的用法实例
2014/09/30 Python
Python读写文件方法总结
2015/06/09 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python argparser的具体使用
2019/11/10 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
后进生评语大全
2015/01/04 职场文书
李白故里导游词
2015/02/12 职场文书
单位考核聘任报告
2015/03/02 职场文书
普通员工辞职信范文
2015/05/12 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS