vue穿梭框实现上下移动

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

使用elementUI的树形组件 tree组件

功能需求:

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
}

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

(0)

相关推荐

  • VUE Elemen-ui之穿梭框使用方法详解

    本文实例为大家分享了VUE Elemen-ui之穿梭框使用方法,供大家参考,具体内容如下 背景: 现在需要使用穿梭框实现,角色的操作功能 需要使用 Element Transfer 穿梭框 HTML代码: <template> <el-card class="box-card" shadow="never" style="height: 700px;"> <div slot="header" cl

  • vue3+typeScript穿梭框的实现示例

    前言 实现功能:模仿element穿梭框的简单功能 每周分享一个vue3+typeScript的小组件,我只想分享下自己的实现思路,楼主是个菜鸡前端,记录下实现过程,说不定对你有帮助. 效果展示 预览地址 github地址 开发过程 思路:用两个数组分别记录左右框框里面的值,根据复选框选中状态来实现删除增加即可 html部分 <div class="shuttle"> <!-- 左边列表 --> <div class="shuttle-box&q

  • Vue实现穿梭框效果

    用vue实现的穿梭框,实现基本的功能(数据移动.全选.反选.搜索). 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>穿梭框</title> <script src="./js/vue.js" type="text/javascript" charset="utf-8"&

  • vue按需引入element Transfer 穿梭框

    Transfer 穿梭框 按需引入Transfer 编辑main.js import { ... Transfer } from 'element-ui'; const components = [ ... Transfer ]; components.map(component => { Vue.component(component.name, component); }); 安装transform-vue-jsx 插件 编辑 .babelrc文件 { "presets":

  • 浅谈基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,虽然组件还不是很多,但是基本场景是够用了,感谢开源! 首先创建一个vue项目 vue init webpack my-project cd my-project npm install 安装cube-ui npm install cube-ui -S 官方推荐使用 babel-plugin-transform-modules 插件,可以更优雅引入组件模块以及对应的样式. npm install babel-pl

  • vue穿梭框实现上下移动

    本文实例为大家分享了vue穿梭框实现上下移动的具体代码,供大家参考,具体内容如下 使用elementUI的树形组件 tree组件 功能需求: 1.左侧的子节点移动到右侧的表格中 2.右侧选中的内容移动到左侧树中,单一移动和全部移动 3.点击右侧节点实现上下移动 首先会遇到的问题可能是如何实现左侧只让子节点显示checkbox,我这边是根据后端返回了一个参数来判断是否是父节点(其实只要后端给父节点加一个nocheck=true就可以) // setLeftAgency :封装好的请求接口名称 se

  • Vue 实现穿梭框功能的详细代码

    Vue - 实现穿梭框功能,效果图如下所示: css .transfer{ display: flex; justify-content: center; align-items: center; } .transfer>.list { width: 200px; height: 300px; border: 1px solid #000; list-style: none; } .content{ font-size: 30px; margin: 0 20px; } .list>li{ pa

  • 基于Vue实现树形穿梭框的示例代码

    Vue 项目里面需要一个树形的穿梭框,但是 elementUI 和 ant-d 组件库的穿梭框组件效果都不是很好,因为源列表和目标列表都是需要树形结构的,所以说这个就很难搞,但是也不怕,因为大佬太多了,有插件可以提供给我们使用,接下来介绍一下这个插件. 树形穿梭框插件 el-tree-transfer 这个插件很好的实现了vue项目树形穿梭框的功能. 安装链接 上面的连接是npm插件地址,安装步骤也很简单. npm install el-tree-transfer --save 或者 npm i

  • Vue实现拖拽穿梭框功能四种方式实例详解

    目录 一.使用原生js实现拖拽 二.VUe使用js实现拖拽穿梭框 三.Vue 拖拽组件 vuedraggable 四.Awe-dnd指令封装 一.使用原生js实现拖拽 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue;

  • 手写可拖动穿梭框组件CustormTransfer vue实现示例

    目录 本文内容 最终效果图 组件html布局 穿梭框左侧内容 穿梭框右侧内容 穿梭框中间向左.向右按钮 把排序好的穿梭数据传给父组件 整体代码 小结 本文内容 需求是实现类似 el-transfer的组件,右侧框内容可以拖动排序: 手写div样式 + vuedraggable组件实现. 最终效果图 组件html布局 新建一个组件文件 CustormTransfer.vue,穿梭框 html 分为左中右三部分,使用flex布局使其横向布局,此时代码如下 <template> <div cl

  • Element的穿梭框数据量大时点击全选卡顿的解决方案

    目录 方案一:复制EUI的transfer组件,然后进行修改,再引入项目目录 方案二:分页操作 分析 方案 现象:我们渲染了9999条数据,由于transfer组件会一次性渲染所有数据,所以一次性渲染这么多,卡个几十秒很正常好吧.所以懒加载或者分页是基本操作,方案二是分页操作. 懒加载的方式可以用EUI的无限滚动:https://element.eleme.cn/ 即便我们做了懒加载之后,点击全选依旧是卡顿6秒以上,所以方案一解决的是:即便做了懒加载或者分页操作后,用户点击分页,依旧会卡顿几秒的

随机推荐