vue实现复杂表格上移下移功能

原创  郑建华   2020-12-04   488人阅读  0 条评论

image.png

由于当前表格较为复杂,其中包含较多合并单元格,所以拖拽不大好处理,于是使用简单的上移下移按钮来替代。表格采用的是element-ui的el-table实现的。用于展示的数据是一个数组,经过合并单元格的方法处理,展现效果为上图所示。而上移、下移是基于整体项目的上移下移。vue中无需操作dom节点仅修改数据就可以达到页面的处理效果,所以上移、下移只需要修改这个用于展示的数组的数据即可。

    大概思路:

     如果,直接基于数组中的数据进行处理,逻辑上会较为复杂,所以可以考虑将相同项目的数据作为一个整体,调整顺序后,重新转换为分散的数据。

    具体代码:

/**
  * 根据项目id转换二维数组
  * @param sourceArray 源数组 项目明细数组
  * @param targetItemId 目标项目id
  */
 convertItemArray(sourceArray, targetItemId) {
   // 目标数组
   const targetArray = []
   // 项目顺序数组 用于保存项目顺序
   const itemOrder = []
   // 项目map 用于数据分类
   const itemMap = {}
   // 传入源数组有值
   if (sourceArray && sourceArray.constructor === Array && sourceArray.length) {
     // 遍历原数组
     sourceArray.forEach(item => {
       const itemId = item.itemId
       // 项目顺序数组中不存在该项目时 添加到数组中
       if (itemOrder.indexOf(itemId) === -1) {
         itemOrder.push(itemId)
       }
       // 项目id匹配目标项目id
       if (targetItemId === itemId) {
         // 获取目标项目id对应的下标值
         this.curItemIndex = itemOrder.length - 1
       }

       // 临时项目数组
       let tempItemArray = []
       // 如果项目中存在数组 则为其赋值
       if (itemMap[itemId]) {
         tempItemArray = itemMap[itemId]
       }
       // 将项目添加到数组中
       tempItemArray.push(item)
       // 将数组添加到map中
       itemMap[itemId] = tempItemArray
     })
   }
   // 项目顺序数组有值
   if (itemOrder && itemOrder.length) {
     // 遍历项目顺序
     itemOrder.forEach(itemId => {
       // 根据项目id取出项目数组
       const tempItemArray = itemMap[itemId]
       // 添加到目标数组中
       targetArray.push(tempItemArray)
     })
   }
   // 返回目标数组
   return targetArray
 },
 /**
  * 将二维数组转换为一维数组(项目数组转换为项目明细数组)
  */
 convertItemDetailArray(sourceArray) {
   // 目标数组
   const targetArray = []
   // 判断不为空
   if (sourceArray && sourceArray.constructor === Array && sourceArray.length) {
     for (let i = 0; i < sourceArray.length; i++) {
       const itemArray = sourceArray[i]
       // 判断当前元素是数组
       if (itemArray && itemArray.constructor === Array) {
         // 当前是最后一项时
         if (i === sourceArray.length - 1) {
           // 计算最后一项下标值
           this.lastProjectIndex = targetArray.length
         }
         for (let j = 0; j < itemArray.length; j++) {
           const item = itemArray[j]
           // 重置排序号
           item.itemOrder = i
           // 添加元素到目标数组中
           targetArray.push(item)
         }
       }
     }
   }
   // 返回目标数组
   return targetArray
 },
 /**
  * 数组元素交换位置
  * @param {array} arr 数组
  * @param {number} index1 添加项目的位置
  * @param {number} index2 删除项目的位置
  * index1和index2分别是两个数组的索引值,即是两个要交换元素位置的索引值,如1,5就是数组中下标为1和5的两个元素交换位置
  */
 swapArray(arr, index1, index2) {
   arr[index1] = arr.splice(index2, 1, arr[index1])[0]
   return arr
 },
 /**
* 下移项目
* @param {Object} index
  */
 downProject(index) {
   // 获取项目id
   const itemId = this.itemDetailList[index].itemId
   // 先根据项目id转换二维数组 并给项目数组下标赋值
   const itemArray = this.convertItemArray(this.itemDetailList, itemId)
   // 下标值大于等于0
   if (this.curItemIndex >= 0) {
     // 下移 交换位置
     this.swapArray(itemArray, this.curItemIndex, this.curItemIndex + 1)
   }
   // 转换回一维数组
   this.itemDetailList = this.convertItemDetailArray(itemArray)
   // 项目合并单元格
   this.merage()
   // 评价方法合并单元格
   this.mergeIndexArr = this.getMergeArr(this.itemDetailList, 'checkMethod')
 },
 /**
  * 上移项目
  * @param {Object} index
  */
 upProject(index) {
   // 获取项目id
   const itemId = this.itemDetailList[index].itemId
   // 先根据项目id转换二维数组 并给项目数组下标赋值
   const itemArray = this.convertItemArray(this.itemDetailList, itemId)
   // 下标值-1 大于等于0
   if (this.curItemIndex - 1 >= 0) {
     // 上移 交换位置
     this.swapArray(itemArray, this.curItemIndex - 1, this.curItemIndex)
   }
   // 转换回一维数组 并且重置itemOrder 项目排序号
   this.itemDetailList = this.convertItemDetailArray(itemArray)
   // 项目合并单元格
   this.merage()
   // 评价方法合并单元格
   this.mergeIndexArr = this.getMergeArr(this.itemDetailList, 'checkMethod')
 },



本文地址:https://www.zjh336.cn/?id=2013
版权声明:本文为原创文章,版权归 郑建华 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?