• 售前

  • 售后

热门帖子
入门百科

vue穿梭框实现上下移动

[复制链接]
又见阿凡提彻 显示全部楼层 发表于 2021-10-25 19:51:53 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了vue穿梭框实现上下移动的具体代码,供大家参考,具体内容如下
使用elementUI的树形组件 tree组件

功能需求:

1、左侧的子节点移动到右侧的表格中
2、右侧选中的内容移动到左侧树中,单一移动和全部移动
3、点击右侧节点实现上下移动
首先会遇到的问题可能是如何实现左侧只让子节点显示checkbox,我这边是根据后端返回了一个参数来判断是否是父节点(着实只要后端给父节点加一个nocheck=true就可以)
  1. // setLeftAgency :封装好的请求接口名称
  2. setLeftAgency(params).then((res) => { // 当返回的code==0时就意味着成功
  3. if (res.data.code == 0) {
  4. let { data } = res.data;
  5. data.forEach((item) => { //遍历返回的数据,如果当这个参数是Item时候就给当前这条数据加上nocheck=true,这样就不会显示checkbox
  6. if(item.Type!=='Item'){
  7.   item.nocheck=true
  8. }
  9. // delete item.children;
  10. });
  11. this.parentNodes = data; // 把修改好的数据放在数组中再渲染
  12. }
复制代码
左侧树结构,中心的按钮和右侧表格(左侧树结构和表格是封装好的,直接引入)
  1. <div class="leftTree"> // 这里绑定的onCreated是左侧树的初始化函数,parentNodes储存了左侧树的所有数据
  2. <ztree :setting="setting" @onCreated = 'onCreated' :parentNodes="parentNodes"></ztree>
  3. </div>
  4. <div class="centerBtn">
  5. <el-button type="danger" plain icon="el-icon-arrow-right" @click="moveTable"></el-button>
  6. <el-button type="danger" plain icon="el-icon-d-arrow-left" @click="moveTreeAll"></el-button>
  7. <el-button type="danger" plain icon="el-icon-arrow-left" @click="moveTree"></el-button>
  8. <el-button type="danger" plain @click="moveUp(index)">上移</el-button>
  9. <el-button type="danger" plain @click="moveDown(index)">下移</el-button>
  10. </div>
  11. <div class="rightTable">
  12. <table :data.sync="tableData" // 表格接口返回的数据
  13.   ref="personListSettingPage"
  14.   :loading='vxeLoading'
  15.   v-model="selectGroups" // 绑定右侧table选中项的数组
  16.   id="personListSettingPage"
  17.   :showPagination= 'false'
  18.   :height-full-screen = 'false'
  19.   @sort-change="sortChange"
  20.   @checkbox-change="selectChange" // 右侧选中的单选事件
  21.   @checkbox-all="selectAll" // 右侧选中项的全选事件
  22.   @data-refresh="getTableData()"> // 获取右侧表格数据的函数
  23.   <vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
  24.   <table-column field="text" show-overflow="title" title="已选指标" filterType='' >
  25.   </table-column>
  26. </table>
  27. </div>
复制代码
用到的参数
  1. moveDownId:"", //下移时储存的数据
  2. moveUpId:"", //上移时遍历右侧表格数据储存的数据
  3. selectGroups:[], // 用来存放右侧选中的数据
  4. tableData:[], // 请求回来后会把左侧的所有数据存放在此数组中
  5. parentNodes:[], //左侧树的所有数据
  6. treeObj:"",
复制代码
左侧树初始化和右侧表格复选框选择事件
  1. // 初始化ztree
  2. onCreated(treeObj){
  3. this.treeObj = treeObj
  4. let nodes = this.treeObj.getCheckedNodes(true);
  5. },
  6. //复选框事件
  7. selectChange({ checked, records}) {
  8. this.selectGroups = records // 把选择的那条数据存储到数组中
  9. },
  10. //复选框全选事件
  11. selectAll({ checked, records }) {
  12. this.selectGroups = records
  13. },
复制代码
上移
  1. moveUp(index){
  2. if(this.selectGroups.length>0){ // 判断右侧是否有选中的项
  3. let goOrnot = true
  4. this.selectGroups.find((seItem)=>{ //遍历右侧tab中选中的项,找到对应的id
  5.   if(seItem.id==this.moveUpId.id){
  6.   this.$message.warning(this.moveUpId.text+"此行没有上移的空间了")
  7.   goOrnot = false
  8.   }
  9. })
  10. if(goOrnot){
  11.   this.tableData.forEach((item,index)=>{ // 遍历右侧表格所有数据,
  12.   this.$set(item,'rowIndex',index) //由于受JavaScript的限制,vue.js不能监听对象属性的添加和删除,所以要使用$set或者Object.assign(target, sources),这样试图才会更新
  13.   })
  14.   let flag = true
  15.   this.selectGroups.forEach((val,index2)=>{
  16.   this.tableData.find((itm,ind)=>{
  17.    if(val.id==itm.id){
  18.    if(itm.rowIndex==0){ // 遍历右侧选中数据和所有数据相对比,如果id相同,在判断刚刚添加的rowIndex属性值是多少
  19.     this.$message.warning(itm.text+"此行没有上移的空间了")
  20.     this.moveUpId = itm // 把当前这条数据存起来
  21.     flag = false
  22.     return
  23.    }else{
  24.     if(flag){ // 此时可以对多条数据进行移动了
  25.     let changeItem = JSON.parse(JSON.stringify(this.tableData[itm.rowIndex-1]))
  26.     this.tableData.splice(itm.rowIndex-1,1);
  27.     this.tableData.splice(itm.rowIndex,0,changeItem)
  28.     }
  29.    }
  30.    }
  31.   })
  32.   })
  33. }
  34. }else{
  35. this.$message.warning('请选择要移动的数据')
  36. }
  37. },
复制代码
下移
  1. moveDown(index){
  2. if(this.selectGroups.length>0){
  3. let goOrnot = true
  4. this.selectGroups.find((seItem)=>{
  5.   if(seItem.id==this.moveDownId.id){
  6.   this.$message.warning(this.moveDownId.text+"此行没有下移的空间了")
  7.   goOrnot = false
  8.   }else{
  9.   this.moveFlag = true
  10.   }
  11. })
  12. if(goOrnot){
  13.   this.tableData.forEach((item,index)=>{
  14.   this.$set(item,'rowIndex',index)
  15.   })
  16.   let selectData = JSON.parse(JSON.stringify(this.tableData))
  17.   let a=[...this.selectGroups]
  18.   a.reverse().forEach((val,index2)=>{
  19.   selectData.find((itm,ind)=>{
  20.    if(val.id==itm.id){
  21.    if(itm.rowIndex==selectData.length-1){
  22.     this.$message.warning(itm.text+"此行没有下移的空间了")
  23.     this.moveDownId = itm
  24.     this.moveFlag = false
  25.    }else{
  26.     if(this.moveFlag){
  27.     let changeItem = itm
  28.     let delIndex=selectData.findIndex(i=>i.id == changeItem.id)
  29.     this.tableData.splice(delIndex,1);
  30.     this.tableData.splice(delIndex+1,0,changeItem)
  31.     this.$refs.personListSettingPage.$refs.Table.setCheckboxRow(this.tableData[itm.rowIndex+1],true) // 给右侧table加了一个ref=personListSettingPage
  32.     }
  33.    }
  34.    }
  35.   })
  36.   })
  37. }
  38. }else{
  39. this.$message.warning('请选择要移动的数据')
  40. }
  41. }
复制代码
表格移动到树
  1. /* 移入tree */
  2. moveTree(){
  3. if(this.selectGroups.length>0){
  4. this.selectGroups.forEach(item=>{
  5.   this.parentNodes.find(val=>{
  6.   if(val.id == item.pid){
  7.    /* 添加节点 */
  8.    let node = this.treeObj.getNodeByParam("id", val.id, null);
  9.    this.treeObj.addNodes(node,item)
  10.    /* 取消新增节点的选中状态 */
  11.    let cancelNode = this.treeObj.getNodeByParam("id", item.id, null);
  12.    this.treeObj.checkNode(cancelNode,false,true);
  13.   }
  14.   })
  15.   this.tableData.splice(this.tableData.findIndex(val => val.id === item.id), 1)
  16. })
  17. }else{
  18. this.$message.warning('请选择要移动的数据')
  19. }
  20. },
复制代码
树移到表格
  1. /* 移入表格 */
  2. moveTable(){
  3. let arr=[]
  4. let nodes = this.treeObj.getCheckedNodes(true);
  5. if(nodes.length>0){
  6. nodes.forEach(item=>{
  7.   this.tableData.find(val=>{
  8.   arr.push(val.id)
  9.   })
  10.   if(arr.indexOf(item.id)>-1) return this.$message.error("数据重复,请勿重新添加")
  11.   this.treeObj.removeNode(item)
  12.   this.tableData.push(this.filterObj(item,["checked","codeSetId",'id','img','infoItemFlag','isMult','itemType','locked','mult','orgCode','pid','sort','syrs','text'])) // 调用下面的方法,去除多余字段
  13. })
  14. }else{
  15. this.$message.warning('请勾选数据')
  16. }
  17. },
复制代码
封装的过滤字段
  1. /* 过滤对象多余字段 */
  2. filterObj(obj, arr) {
  3. const result = {}
  4. Object.keys(obj).filter((key) => arr.includes(key)).forEach((key) => {
  5. result[key] = obj[key]
  6. })
  7. return result
  8. }
复制代码
以上就是本文的全部内容,渴望对大家的学习有所帮助,也渴望大家多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

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

本版积分规则

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

  • 微信公众号

  • 商务合作