加入列表缓存后带来的问题

121 阅读2分钟

当双击时加载详情页,然后再回到列表重新打开另一个,还是上一个详情页的信息,对双击事件进行调整。 调整前:

addEve(temp) {
      const vm = this
      //双击打开详情页面
      temp.ondblclick = function () {
        const id = temp.querySelector('.acceptno').getAttribute('id')
        let record = {}
        for (let i = 0; i < vm.dataSource.length; i++) {
          if (vm.dataSource[i].id === id) {
            record = vm.dataSource[i]
          }
        }
        const consignmentType = record.consignmenttype
        vm.detail(record)
      }

      // 单击选中/取消
      temp.onclick = function () {
        let i
        const id = temp.querySelector('.acceptno').getAttribute('id')
        let record = {}
        for (i = 0; i < vm.dataSource.length; i++) {
          if (vm.dataSource[i].id === id) {
            record = vm.dataSource[i]
          }
        }
        let selectKeys = vm.selectedRowKeys
        let selectRows = vm.selectionRows

        i = selectKeys.indexOf(record.id)
        if (i >= 0) {
          selectKeys.splice(i, 1)
          selectRows.splice(i, 1)
        } else {
          selectKeys.push(record.id)
          selectRows.push(record)
        }
        vm.onSelectChange(selectKeys, selectRows)
      }
      temp.addEventListener('mouseover', function () {
        temp.style.boxShadow = '0px 0px 3px 1px #1890ff'
        temp.style.cursor = 'pointer'
      })
      temp.addEventListener('mouseout', function () {
        temp.style.boxShadow = 'unset'
      })
    },
    
    
    
`

调整后:
你可以将双击事件的处理逻辑移动到单击事件的回调函数中,在单击事件中判断是否已经选中了该行记录,如果选中了就执行双击事件的逻辑,如果没有选中则执行单击选中/取消的逻辑。以下是修改后的代码:

```javascript
addEve(temp) {
  const vm = this
  let canDouble = true // 添加一个标志,表示是否可以执行双击事件

  // 单击选中/取消
  temp.onclick = function () {
    let i
    const id = temp.querySelector('.acceptno').getAttribute('id')
    let record = {}
    for (i = 0; i < vm.dataSource.length; i++) {
      if (vm.dataSource[i].id === id) {
        record = vm.dataSource[i]
      }
    }
    let selectKeys = vm.selectedRowKeys
    let selectRows = vm.selectionRows

    i = selectKeys.indexOf(record.id)
    if (i >= 0) {
      selectKeys.splice(i, 1)
      selectRows.splice(i, 1)
    } else {
      selectKeys.push(record.id)
      selectRows.push(record)
    }
    vm.onSelectChange(selectKeys, selectRows)

    // 双击事件的逻辑
    if (canDouble) {
      canDouble = false // 设置为false,表示需要等待一段时间才能再次执行双击事件的逻辑
      setTimeout(function () {
        if (!canDouble) {
          const consignmentType = record.consignmenttype
          vm.detail(record)
        }
        canDouble = true
      }, 300) // 设置等待的时间,单位为毫秒
    }
  }

  temp.addEventListener('mouseover', function () {
    temp.style.boxShadow = '0px 0px 3px 1px #1890ff'
    temp.style.cursor = 'pointer'
  })

  temp.addEventListener('mouseout', function () {
    temp.style.boxShadow = 'unset'
  })
}

在上面的代码中,添加了一个名为canDouble的变量,用于标志是否可以执行双击事件的逻辑。在单击事件的回调函数中,先执行单击选中/取消的逻辑,然后判断canDouble的值,如果为true表示可以执行双击事件的逻辑,那么就将canDouble设置为false,并使用setTimeout函数延时执行双击事件的逻辑。在延时函数中,再次判断canDouble的值,如果为false表示已经执行了单击事件的逻辑,那么就执行双击事件的逻辑,否则不执行。在双击事件的逻辑中,执行完逻辑后将canDouble设置为true,表示可以再次执行双击事件的逻辑。