当双击时加载详情页,然后再回到列表重新打开另一个,还是上一个详情页的信息,对双击事件进行调整。 调整前:
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,表示可以再次执行双击事件的逻辑。