fix: 解决表格拖拽时高亮阴影停留在原位置的问题

This commit is contained in:
chenjianxing 2021-09-28 16:50:44 +08:00 committed by jianxing
parent 1786f96afc
commit 1b745d5c5b
3 changed files with 22 additions and 2 deletions

View File

@ -41,7 +41,7 @@ public abstract class ZentaoClient extends BaseClient {
ResponseEntity<String> response = restTemplate.exchange(loginUrl + sessionId, HttpMethod.POST, requestEntity, String.class);
getUserResponse = (GetUserResponse) getResultForObject(GetUserResponse.class, response);
} catch (Exception e) {
LogUtil.error("get result for object error," + e.getMessage());
LogUtil.error(e);
MSException.throwException(e.getMessage());
}
GetUserResponse.User user = getUserResponse.getUser();

View File

@ -483,6 +483,10 @@ export default {
/* 解决拖拽排序后hover阴影错乱问题 */
.ms-table >>> .el-table__body tr:hover>td
{
background-color: #F5F7FA!important;
background-color: #F5F7FA;
}
.disable-hover >>> tr:hover>td{
background-color: #ffffff !important;
}
</style>

View File

@ -534,6 +534,8 @@ export function handleRowDrop(data, callback) {
}
const dropBars = tbody.getElementsByClassName('table-row-drop-bar');
const msTable = document.getElementsByClassName('ms-table');
// 每次调用生成一个class
// 避免增删列表数据时,回调函数中的 data 与实际 data 不一致
let dropClass = 'table-row-drop-bar-random' + '_' + getUUID();
@ -545,6 +547,14 @@ export function handleRowDrop(data, callback) {
Sortable.create(tbody, {
handle: "." + dropClass,
animation: 100,
onStart: function (/**Event*/evt) {
// 解决拖拽时高亮阴影停留在原位置的问题
if (msTable) {
msTable.forEach(table => {
table.classList.add('disable-hover');
});
}
},
onEnd({ newIndex, oldIndex}) {
let param = {};
param.moveId = data[oldIndex].id;
@ -569,6 +579,12 @@ export function handleRowDrop(data, callback) {
callback(param);
}
}
msTable.forEach(table => {
if (msTable) {
table.classList.remove('disable-hover');
}
});
}
});
}, 100);