Según las necesidades del cliente, cada vez que se hace clic en el botón, salta a la posición específica de la tabla electrónica, lo que ahorra la necesidad de desplazarse para buscar datos.
Idea de implementación: busque el ID de la fila que identifica los datos recorriendo filas y columnas y guárdelo en una matriz.
Luego, en el método del botón, obtenga la altura del dom en la fila donde se encuentra la identificación y use el método scrollTop = la altura del dom en la fila donde se encuentra la identificación - la altura del contenedor en sí
Primero obtenga los datos de el-table
// 父组件获取点击日历的当天数据
getHistoryDatas() {
//开启遮罩层
this.loading = true;
let query = {
startTime: this.calendarDayStartTime,
endTime: this.calendarDayEndTime,
stationCode: this.stationCode,
pageNum: this.currentPage,
pageSize: this.pageSize,
searchType: this.dataType,
tagStatus: this.value
};
let that = this;
// 查询点击日历当天的数据
getHistoryData(query)
.then(response => {
// that.historyDataTables = response.rows;
const { rows, total } = response;
if (that.currentPage === 1) {
that.historyDataTables = rows;
} else {
that.historyDataTables.push(...rows);
}
that.totalCount = total; // 数据总条数
that.totalNum = Math.ceil(that.totalCount / that.pageSize); // 计算总页码
// 获取表格 DOM 元素和表格数据 把表格的标识数据所在行的id存进数组里,为写按钮跳转标识位置使用
const tableData = that.historyDataTables;
const columns = that.$refs.multipleTable.columns;
// 遍历表格行,查找满足条件的行
for (let i = 0; i < tableData.length; i++) {
const row = tableData[i];
for (let j = 3; j < columns.length; j++) {
const column = columns[j];
// 判断是否满足条件
if (row[column.property + "_tag_status"] === "0") {
// 获取对应的行元素
that.rowIdList.push(row.id);
break;
}
}
}
})
.finally(() => {
// 关闭遮罩层
that.loading = false;
that.pageIsEnd = true; // 数据加载完毕,设置为 true
if (that.dataType == "分钟数据") {
that.historyDataTables.forEach(data => {
data.sampleTime = moment(data.sampleTime).format(
"yyyy-MM-DD HH:mm:ss"
); //去掉日
});
}
// 下面的代码用不到了
that.$nextTick(function() {
let dom = that.$refs.multipleTable.bodyWrapper;
//监听table滚动
// dom.addEventListener("scroll", () => {
// that.scrollTop = dom.scrollTop;
// });
// 当设置每页数据数量时使用滚动加载
const handleScroll = throttle(500, () => {
that.scrollTop = dom.scrollTop;
const distanceToBottom =
dom.scrollHeight - that.scrollTop - dom.clientHeight;
if (distanceToBottom <= 100 && !that.loadingData) {
if (that.currentPage >= that.totalNum) {
that.loading = false;
that.pageIsEnd = true; // 更新状态为 pageIsEnd
return;
} else {
that.currentPage += 1;
that.getHistoryDatas();
}
}
});
dom.addEventListener("scroll", handleScroll);
// 在重新发送请求后回到原先的滚动位置
dom.scrollTop = that.scrollTop;
});
});
},
método del botón
// 滚动到目标行所在的位置
scrollToTargetRow() {
if (this.count >= this.rowIdList.length) {
this.count = 0;
} else {
// 获取表格 DOM 元素和标识数据所在行的id
const id = this.rowIdList[this.count];
this.TableDom = this.$refs.multipleTable.$el; // 获取table元素
// 获取所在行的dom元素,nth-child是从1开始的,所以我的id设置的从1开始
const rowEl = this.TableDom.querySelector(
`.el-table__row:nth-child(${id})`
);
const scrollEl = this.TableDom.querySelector(".el-table__body-wrapper");
if (rowEl) {
// 滚动到目标行所在位置
this.$nextTick(() => {
const offsetTop = rowEl.offsetTop; // 目标行的高度
scrollEl.scrollTop = offsetTop - scrollEl.offsetTop; // 目标行的高度 - 容器本身的高度
});
this.count++;
}
}
},