当前位置： 首页 > news >正文

vue3，element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据

news 来源：原创 2025/7/2 0:29:34

基础用法不太明白的请参考官网文档 ；element ui Plus官网：Table 表格 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/component/table.html

1、添加一个基础表格

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template>

2、为表格添加一下基础的样式，为并设置固定的高度：

max-height="430"

为表格添加一个id类名 ，或者  table-layout="fixed"

id="out-table"   table-layout="fixed"

例如这是一个完成的样式：

<template><el-tableref="tableRef" border id="out-table" :data="headerList" :fit="true" table-layout="fixed"max-height="430"header-align="center" style="width:100%;" :header-cell-style="{color: '#1e293b',textAlign: 'center',fontWeight: '600',background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',borderColor: '#e2e8f0',height: '40px'}":cell-style="{textAlign: 'center',color: '#334155',borderColor: '#e2e8f0',background: '#fff',height: '40px'}"><el-table-column prop="materialType" :label="$t('common.materialType')"><template #header><span class="flex items-center justify-center w-full">{{ $t('common.materialType') }}<span class="text-indigo-500 ml-2 text-sm">({{ headerList.length }})</span></span></template></el-table-column><el-table-column prop="sourceWarehouName" :label="$t('common.OutWarehouse')" ><template #default="scope"><el-button-group size=""><el-button type="info w-[80px]" class="">{{scope.row.sourceWarehouName}}</el-button><el-button type="info w-[80px]"  class="" plain>{{scope.row.sourceWarehouCode}}</el-button></el-button-group></template></el-table-column><el-table-column prop="targetWarehouName" :label="$t('common.InWarehouse')" ><template #default="scope"><el-button-group size=""><el-button type="primary w-[80px]" class="">{{scope.row.targetWarehouName}}</el-button><el-button type="primary w-[80px]"  class="" plain>{{scope.row.targetWarehouCode}}</el-button></el-button-group></template></el-table-column><el-table-column prop="qty" :label="$t('mes.qty')" width="120"><template #default="scope"><el-tag type="warning" size="large"  class="w-[90px]" plain>{{scope.row.qty}}</el-tag></template></el-table-column><el-table-column prop="unit" :label="$t('wms.unit')" width="80"><template #default="scope"><el-tag type="info" size="large" class="w-[60px]" plain effect="">{{scope.row.unit}}</el-tag></template></el-table-column></el-table>
</template>

3、JS部分

注意：这里省略了给表格赋值的代码，自己自行添加（里面只有自动滚动部分的代码）

  1. 表格会以每 50 毫秒 1 像素的速度自动向下滚动。
  2. 当滚动到底部时，暂停 3 秒钟，然后将滚动条重置到顶部，继续滚动。
  3. 如果用户与滚动区域交互（例如手动拖动滚动条），则暂停自动滚动，直到用户停止交互后再恢复。
  4. 标记用户正在交互：将 isUserInteracting 设置为 true，表示用户正在与滚动区域进行交互。
  5. 保存当前滚动位置：通过 scrollWrapper.scrollTop 获取当前滚动条的位置，并将其存储到 lastScrollPosition 中。
  6. 暂停自动滚动：调用 stopScroll() 方法，清除定时器，停止自动滚动。
<script setup>// 定义表格的数据绑定
const headerList = ref([])
const tableRef = ref(null)//定义滚动的变量
let scrollTimer = null
let isUserInteracting = false
let lastScrollPosition = 0const startScroll = () => {if (scrollTimer) {clearInterval(scrollTimer)}scrollTimer = setInterval(() => {//  tableRef 是 Vue 的响应式引用，指向表格组件实例。//  只有当表格存在且用户没有与滚动区域交互时，才会继续执行滚动逻辑。const table = tableRef.valueif (table && !isUserInteracting) {// 通过 querySelector 获取表格的滚动容器（.el-scrollbar__wrap），这是 Element UI 表格组件的默认滚动区域。const scrollWrapper = table.$el.querySelector('.el-scrollbar__wrap')if (scrollWrapper) {// scrollWrapper.scrollTop：当前滚动条顶部距离。// scrollWrapper.clientHeight：可见区域的高度。// scrollWrapper.scrollHeight：整个内容的高度。// 如果 scrollTop + clientHeight >= scrollHeight，说明已经滚动到底部if (scrollWrapper.scrollTop + scrollWrapper.clientHeight >= scrollWrapper.scrollHeight) {// 到达底部，暂停3秒   等待 3 秒后将滚动条重置到顶部，并重新启动滚动逻辑clearInterval(scrollTimer)setTimeout(() => {scrollWrapper.scrollTop = 0startScroll()}, 3000)} else {//如果未到达底部，则每次将滚动条向下移动 1 像素scrollWrapper.scrollTop += 1}}}}, 50)
}const stopScroll = () => {if (scrollTimer) {clearInterval(scrollTimer)scrollTimer = null}
}//处理用户与表格滚动区域的交互，确保在用户操作时暂停自动滚动，并在用户停止操作后恢复滚动。
const handleUserInteraction = () => {isUserInteracting = trueconst table = tableRef.valueif (table) {const scrollWrapper = table.$el.querySelector('.el-scrollbar__wrap')if (scrollWrapper) {lastScrollPosition = scrollWrapper.scrollTop}}stopScroll()
}const resumeScroll = () => {isUserInteracting = falseconst table = tableRef.valueif (table) {const scrollWrapper = table.$el.querySelector('.el-scrollbar__wrap')if (scrollWrapper) {scrollWrapper.scrollTop = lastScrollPosition}}startScroll()
}onMounted(async () => {await getDefaultDateRange()await rawMaterialsTransferSummary()startScroll()// 添加用户交互事件监听const table = tableRef.valueif (table) {const scrollWrapper = table.$el.querySelector('.el-scrollbar__wrap')if (scrollWrapper) {scrollWrapper.addEventListener('mousedown', handleUserInteraction)scrollWrapper.addEventListener('touchstart', handleUserInteraction)scrollWrapper.addEventListener('mouseup', resumeScroll)scrollWrapper.addEventListener('touchend', resumeScroll)scrollWrapper.addEventListener('wheel', handleUserInteraction)}}
})onUnmounted(() => {stopScroll()// 移除事件监听const table = tableRef.valueif (table) {const scrollWrapper = table.$el.querySelector('.el-scrollbar__wrap')if (scrollWrapper) {scrollWrapper.removeEventListener('mousedown', handleUserInteraction)scrollWrapper.removeEventListener('touchstart', handleUserInteraction)scrollWrapper.removeEventListener('mouseup', resumeScroll)scrollWrapper.removeEventListener('touchend', resumeScroll)scrollWrapper.removeEventListener('wheel', handleUserInteraction)}}
})
</script>

相关文章：

vue3，element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据

基础用法不太明白的请参考官网文档 &#xff1b;element ui Plus官网&#xff1a;Table 表格 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/component/table.html 1、添加一个基础表格 <template><e…...

编程日记 2025/7/2 0:29:34

Selenium 怎么加入代理IP，以及怎么检测爬虫运行的时候，是否用了代理IP？

使用selenium爬虫的时候&#xff0c;如果不加入代理IP&#xff0c;很容易会被网站识别&#xff0c;容易封号&#xff1b; 最近去了解了一下买代理ip&#xff0c;但是还是有一些不太懂的东西。 例如有了代理ip以后&#xff0c;怎么用在爬虫上&#xff0c;requests 和selenium的…...

编程日记 2025/7/1 23:17:17

【Python爬虫实战篇】--Selenium爬取Mysteel数据

任务&#xff1a;爬取我的钢铁网的钢材价格指数数据&#xff0c;需要输入时间和钢材类型 网站&#xff1a;钢铁价格指数_今日钢铁价格指数实时行情走势_我的钢铁指数 目录 1.环境搭建 2.打开网站 3.点击右侧按钮展开 4.点击需要的钢材数据 5.点击“按日查询” 6.输入日查…...

编程日记 2025/6/29 12:04:57

LLM学习笔记4——本地部署Docker、vLLM和Qwen2.5-32B-Instruct实现OpenManus的使用

系列文章目录 参考博客 参考博客 参考博客 参考博客 文章目录 系列文章目录前言一、OpenManus介绍二、环境搭建1.DockervLLM2.搭建OpenManus1&#xff09;安装anaconda虚拟环境2&#xff09;安装OpenManus3&#xff09;下载并配置Qwen2.5-32B-Instruct模型4&#xff09;配置与…...

编程日记 2025/6/29 11:07:08

aarcpy 列表函数的使用(1)

arcpy.ListFeatureClasses() 该函数用于列出指定工作空间中的所有要素类。可以通过通配符和过滤条件进一步筛选结果。 语法&#xff1a; python arcpy.ListFeatureClasses(wild_cardNone, feature_typeNone)• wild_card&#xff1a;用于筛选要素类名称的通配符&#xff0c;…...

编程日记 2025/6/29 9:18:28

maven工程中引入外部jar

1、引入模块下的jar 1.负责打包的模块&#xff0c;pom中加上这个插件&#xff0c;这个可以把外部jar包打入工程中。 <!-- 打包 --> <build><finalName>xxx-send-admin</finalName><resources><resource><directory>${project.base…...

编程日记 2025/7/1 23:28:54

C++智能指针上

一、裸指针 “裸指针”是最基础的&#xff0c;直接存储内存地址的指针类型。特点&#xff1a;①它本身没有自动的内存管理机制&#xff1a;如它不会自动释放内存&#xff0c;也不会检查是否指向有效的内存区域&#xff1b;②直接操作内存地址&#xff0c;不进行任何的边界检查&…...

编程日记 2025/7/2 0:14:28

flutter 中各种日志

日志方法对比 输出方式调试模式控制台输出发布模式控制台输出DevTools Logging 视图print()✅ 显示✅ 显示❌ 不显示debugPrint()✅ 显示✅ 显示❌ 不显示stderr.writeln()✅ 显示✅ 显示✅ 显示dart:developer.log()✅ 显示❌ 不显示✅ 显示 详细说明&#xff1a; print()&a…...

编程日记 2025/7/1 23:07:19

Java面试：从Spring Boot到微服务的全面考核

Java面试&#xff1a;从Spring Boot到微服务的全面考核 场景设定&#xff1a; 在一家互联网大厂的面试室内&#xff0c;严肃的面试官正准备开始对前来面试的赵大宝进行技术考核。赵大宝是一位自称在Java开发方面经验丰富的求职者&#xff0c;不过却是个搞笑的水货程序员。 第…...

编程日记 2025/6/29 10:40:58

安卓adb shell串口基础指令

目录 前言一、列出串口设备节点二、修改串口设备权限三、串口参数配置&#xff08;stty命令&#xff09;3.1 基本配置3.2 其他常用参数3.3 查看当前配置 四、数据收发操作4.1 发送数据4.2 接受数据 参考链接: 前言 在 Android 设备上&#xff0c;ADB提供了一系列命令用于与设备…...

编程日记 2025/7/2 0:13:47

大模型技术全景解析：从基础架构到Prompt工程

大模型技术全景解析&#xff1a;从基础架构到Prompt工程 引言 近年来&#xff0c;大型语言模型(LLMs)如GPT、BERT等取得了突破性进展&#xff0c;彻底改变了自然语言处理领域。本文将全面剖析大模型的核心技术要素&#xff0c;包括三要素构成、系统架构、机器学习范式演进、P…...

编程日记 2025/6/29 11:35:27

404页面精选（一）翻滚盒子

内容很详细&#xff0c;直接上代码 效果演示 源码 <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"><title>翻滚盒子</title><style>body {background: #000;h…...

编程日记 2025/7/1 23:46:00

LJF-Framework 第15章 想想搞点啥-若依管理系统兼容一下

LJF-Framework 第15章 想想搞点啥-若依管理系统兼容一下 一、下载后端源码 我们学习一下他的前后端分离的项目吧RuoYi-Vue，我看他有单独的Vue3版本的项目，我们就整这新的吧，向新新势力低头。 1、下载地址 git clone https://gitcode.com/yangzongzhuan/RuoYi-Vue.git2、…...

编程日记 2025/6/29 11:09:59

Hadoop基础知识

Hadoop 是由 Apache 基金会开发的开源分布式计算框架&#xff0c;主要用于处理海量数据的存储和计算问题。其核心设计基于 Google 的 MapReduce 编程模型和 GFS&#xff08;Google File System&#xff09;&#xff0c;旨在通过集群化的廉价硬件实现高可靠性、高扩展性的大数据…...

编程日记 2025/7/1 22:49:02

第1讲：Transformers 的崛起：从RNN到Self-Attention

序列建模的演进之路 一、RNN&#xff08; Recurrent Neural Networks&#xff09;&#xff1a;序列处理的开拓者 循环神经网络(RNN)是最早处理序列数据的深度学习结构。RNN的核心思想是在处理序列的每个时间步时保持一个"记忆"状态。 h_t tanh(W_x * x_t W_h * …...

编程日记 2025/7/1 23:13:00

经验分享 | 如何高效使用 `git commit --amend` 修改提交记录

背景 在「地面智能观测项目」这种多模块协作的物联网系统中&#xff0c;版本迭代频率高达每周3次。每个部署包&#xff08;如v0.3.19&#xff09;都包含硬件控制脚本、数据处理模块和部署工具&#xff0c;任何提交遗漏都可能导致部署失败。传统的新建提交方式会造成冗余记录&a…...

编程日记 2025/6/29 12:13:20

生物创新药研发为何要上电子实验记录本？

前言&#xff1a;数据驱动的生物创新药研发新范式 在精准医疗时代&#xff0c;生物创新药以其靶向性强、疗效确切的优势&#xff0c;成为肿瘤、自身免疫性疾病等复杂病症的核心治疗方案。国家"十四五" 规划明确将生物制药列为战略性新兴产业&#xff0c;各地政府纷纷…...

编程日记 2025/7/1 23:33:49

PH热榜 | 2025-04-24

1. Peek 标语&#xff1a;AI个人财务教练&#xff0c;帮你做出明智的财务决策。 介绍&#xff1a;Peek的人工智能助手能够主动进行财务检查&#xff0c;分析你的消费模式&#xff0c;并以一种细腻而积极的方式帮助你改善习惯。完全没有评判&#xff0c;也没有负罪感。就像为你…...

编程日记 2025/7/1 23:30:35

民锋视角下的节奏判断与资金行为建模

民锋视角下的节奏判断与资金行为建模 在市场节奏的研判中&#xff0c;行为模型始终是构建逻辑核心。以民锋为代表的一类研究视角&#xff0c;更关注的是微观结构中的资金行为痕迹&#xff0c;而非单一技术形态。 节奏并非由K线决定&#xff0c;而是由成交密度与换手效率共同塑…...

编程日记 2025/6/29 11:25:53

Debian服务器上JSP页面无法加载如何解决？

如果你在 Debian 服务器上部署 JSP 页面无法加载&#xff0c;可以按以下步骤排查和解决问题&#xff1a; 1. 确认安装了 Java 环境 JSP 需要 Java 支持&#xff0c;先确认 Java 是否安装并配置好&#xff1a; java -version如果未安装&#xff0c;使用如下命令安装 OpenJDK&…...

编程日记 2025/7/1 3:06:35

第三篇：Django创建表关系及生命周期流程图

第三篇&#xff1a;Django创建表关系及生命周期流程图 文章目录 第三篇&#xff1a;Django创建表关系及生命周期流程图一、Django中orm创建表关系一、数据库中的表关系二、创建表 二、Django请求生命周期流程图 一、Django中orm创建表关系 一、数据库中的表关系 我们可以通过…...

编程日记 2025/7/1 22:59:43

【玩泰山派】7、玩linux桌面环境xfce - （2）音视频，yt-dlp下载工具、parole播放器

文章目录 前言yt-dlpyt-dlp概述发展背景特点应用场景使用方式局限性 安装yt-dlpyt-dlp常用命令直接下载默认格式指定格式 查看视频所有分辨率下载指定分辨率参考 parole播放器使用Parole概述源码地址使用 前言 前面安装了ubuntu Xfce桌面环境(xubuntu-desktop)&#xff0c;现在…...

编程日记 2025/6/29 10:59:51

【文献速递】NMR代谢组寻找预测DR发展的候选标志物

2024年7月5日&#xff0c;中山大学中山眼科中心王伟教授团队在Ophthalmology&#xff08;IF&#xff1a;13.2&#xff09;上发表了题为“Plasma Metabolomics Identifies Key Metabolites and Improves Prediction of Diabetic Retinopathy&#xff1a;Development and Validat…...

编程日记 2025/7/2 0:23:55

flask学习(1)

1.基本框架 from flask import Flask app Flask(__name__)app.route(/) def hello():return "<h1>Hello, Flask in Conda!</h1>"if __name__ __main__:app.run(host0.0.0.0, port5000, debugTrue) # 关键行&#xff01; 在此基础上 from flask imp…...

编程日记 2025/7/1 22:39:29

详解springcloudalibaba采用prometheus+grafana实现服务监控

1.官网下载安装 prometheus和grafana promethus 官网&#xff1a;https://prometheus.io/ 1.下载windows版本安装包 2.双击启动 3.访问地址 http://localhost:9090 grafana 官网&#xff1a;https://grafana.com/ 1.下载windows版本安装包 2.启动 &#xff0c;默认windo…...

编程日记 2025/7/1 22:43:26

Java查询数据库表信息导出Word

参考: POI生成Word多级标题格式_poi设置word标题-CSDN博客 1.概述 使用jdbc查询数据库把表信息导出为word文档, 导出为word时需要下载word模板文件。 已实现数据库: KingbaseES, 实现代码: 点击跳转 2.效果图 2.1.生成word内容 所有数据库合并 数据库不合并 2.2.生成文件…...

编程日记 2025/6/29 11:10:04

【金仓数据库征文】从云计算到区块链：金仓数据库的颠覆性创新之路

目录 一、引言 二、金仓数据库概述 2.1 金仓数据库的背景 2.2 核心技术特点 2.3 行业应用案例 三、金仓数据库的产品优化提案 3.1 性能优化 3.1.1 查询优化 3.1.2 索引优化 3.1.3 缓存优化 3.2 可扩展性优化 3.2.1 水平扩展与分区设计 3.2.2 负载均衡与读写分离 …...

编程日记 2025/6/29 10:07:30

Kotlin函数体详解：表达式函数体 vs 代码块函数体——使用场景与最佳实践

&#x1f9e9; 什么是表达式函数体&#xff08;Expression Body&#xff09;&#xff1f; 表达式函数体指的是使用 号直接返回一个表达式结果的函数写法。 ✅ 示例&#xff1a; fun add(x: Int, y: Int): Int x y这个函数的意思是&#xff1a;传入两个整数&#xff0c;返…...

编程日记 2025/6/29 10:45:10

【bug修复】一次诡异的接口数据显示 bug 排查之旅

一次诡异的接口数据显示 bug 排查之旅 在后端开发的日常中&#xff0c;总会遇到一些让人摸不着头脑的 bug&#xff0c;最近我就经历了一个颇为诡异的情况。接口接收到的响应 data 对象里字段明明都有值&#xff0c;但直接打印到控制台却显示空字符串&#xff0c;最后通过一个简…...

编程日记 2025/6/29 11:49:11

C++ RPC以及cmake

目录 1.RPC概念 2.RPC实现计算举例 3.python进行rpc调用 4.thrift实现分布式容器创建 5.阶段总结 6.cmake简介 7.cmake使用的一般步骤 8.cmake编译多层次文件 9.cmake编译多种交付件 1.RPC概念 # 1.需求分析 靠谱的商用项目不是只有一个可执行程序就够了的。好的商用…...

编程日记 2025/6/29 9:18:43

数字隔离器，筑牢AC-DC数字电源中的“安全防线”

在传统工业与现代科技高速交融的发展浪潮中&#xff0c;AC-DC数字电源作为电能转换的核心枢纽&#xff0c;不仅能将交流电精准地转化为直流电&#xff0c;还可通过软件编程实现电流限制、过温保护与设定输出电压等多种功能&#xff0c;是现代众多电力电子基础设施中不可或缺的精…...

编程日记 2025/6/29 10:39:23

使用“复合索引”和不使用“复合索引”的优化对比

目录 1.创建数据库 2.未创建索引 3.创建索引 4.结论 1.创建数据库 CREATE TABLE orders (order_id INT AUTO_INCREMENT PRIMARY KEY,customer_id INT,order_date DATE,total_amount DECIMAL(10, 2));插入数据&#xff1a; INSERT INTO orders (customer_id, order_date, t…...

编程日记 2025/6/29 12:04:43

.NETCore部署流程

资料下载&#xff1a;https://download.csdn.net/download/ly1h1/90684992 1.下载托管包托管捆绑包 | Microsoft Learn&#xff0c;下载后点击安装即可。 2.安装IIS 3.打开VS2022&#xff0c;新建项目&#xff0c;选择ASP.NET Core Web API 5.Program修改启动项&#xff0c;取…...

编程日记 2025/6/29 10:31:31

深入解析微软MarkitDown：原理、应用与二次开发指南

一、项目背景与技术定位 微软开源的MarkitDown并非简单的又一个Markdown解析器&#xff0c;而是针对现代文档处理需求设计的工具链核心组件。该项目诞生于微软内部大规模文档系统的开发实践&#xff0c;旨在解决以下技术痛点&#xff1a; 大规模文档处理性能&#xff1a;能够高…...

编程日记 2025/7/1 15:27:43

Rust 2025：内存安全革命与异步编程新纪元

Rust 2025 Edition通过区域内存管理、泛型关联类型和零成本异步框架三大革新&#xff0c;重新定义系统级编程语言的能力边界。本次升级不仅将内存安全验证效率提升80%&#xff0c;更通过异步执行器架构优化实现微秒级任务切换。本文从编译器原理、运行时机制、编程范式转型三个…...

编程日记 2025/6/29 10:16:48

Vue3 setup、计算属性、侦听器、响应式API

一、setup 一、setup 函数基础 作用&#xff1a;组合式 API 的入口&#xff0c;用于定义响应式数据、方法和生命周期钩子 执行时机&#xff1a;在 beforeCreate 之前调用&#xff0c;此时组件实例尚未创建 基本结构&#xff1a; export default {setup(props, context) {/…...

编程日记 2025/6/29 9:54:29

从内核到应用层：深度剖析信号捕捉技术栈（含sigaction系统调用/SIGCHLD回收/volatile内存屏障）

Linux系列 文章目录 Linux系列前言一、进程对信号的捕捉1.1 内核对信号的捕捉1.2 sigaction()函数1.3 信号集的修改时机 二、可重入函数三、volatile关键字四、SIGCHLD信号 前言 Linux系统中&#xff0c;信号捕捉是指进程可以通过设置信号处理函数来响应特定信号。通过信号捕捉…...

编程日记 2025/6/29 9:18:32

【KWDB 创作者计划】_嵌入式硬件篇---寄存器与存储器截断与溢出

文章目录 前言一、寄存器与存储器1. 定义与基本概念寄存器（Register）位置功能特点存储器（Memory）位置功能特点2. 关键区别3. 层级关系与协作存储层次结构协作示例4. 为什么需要寄存器性能优化指令支持减少总线竞争5. 其他寄存器类型专用寄存器程序计数器（PC）栈指针（SP）…...

编程日记 2025/6/29 11:21:43

Python torchvision.datasets 下常用数据集配置和使用方法

torchvision.datasets 提供了许多常用的数据集类&#xff0c;以下是一些常用方法&#xff08;datasets中有大量数据集处理方法&#xff0c;这里仅展示了部分数据集处理方法&#xff09;及其实现类的介绍、用法和输入参数解释&#xff1a; CIFAR CIFAR10 &#xff1a;包含 10 个…...

编程日记 2025/6/29 11:01:40

unity使用iTextSharp生成PDF文件

iTextSharp 可以在VS中工具下面得NuGet包管理器中下载 &#xff0c;具体操作可以搜一下 很多 &#xff0c; 我直接把我得生成pdf代码附上 我这个是生成我一个csv文件内容和图片 using System.IO; using UnityEngine; using iTextSharp.text; using iTextSharp.text.pdf; using…...

编程日记 2025/6/29 9:18:33

django admin 添加自定义页面

在Django中&#xff0c;你可以通过多种方式向Django Admin添加自定义页面。以下是一些常见的方法&#xff1a; 方法1&#xff1a;使用ModelAdmin的get_urls()方法 如果你只是想添加一个简单的页面来展示信息&#xff0c;你可以在你的ModelAdmin类中重写get_urls()方法。 from…...

编程日记 2025/6/29 11:50:47

Java并发编程｜CompletableFuture原理与实战：从链式操作到异步编排

🔥 本文系统讲解Java并发编程核心类CompletableFuture，涵盖线程池配置策略、异步编程实践、异常处理机制等关键技术。通过电商订单系统与物流调度实战案例，深度解析：1）CompletableFuture链式操作与异步编排 2）多线程任务聚合与结果处理 3）生产级异常处理方案 4）组合操…...

编程日记 2025/6/29 12:02:11

动态自适应分区算法（DAPS）设计流程详解

动态自适应分区算法&#xff08;Dynamic Adaptive Partitioning System, DAPS&#xff09;是一种通过实时监测系统状态并动态调整资源分配策略的智能算法&#xff0c;广泛应用于缓存优化、分布式系统、工业制造等领域。本文将从设计流程的核心步骤出发&#xff0c;结合数学模型…...

编程日记 2025/6/29 9:18:49

优雅实现网页弹窗提示功能：JavaScript与CSS完美结合

在现代Web开发中&#xff0c;弹窗提示是提升用户体验的重要元素之一。本文将深入探讨如何实现一个优雅、可复用的弹窗提示系统&#xff0c;避免常见问题如重复触发、样式混乱等。 核心代码解析 // 控制弹窗是否可以显示的标志 let alertStatus true;// 显示提示信息 functio…...

编程日记 2025/6/29 11:58:02

LeetCode-Hot100

数组 1.数组——最大子数组和 解题思路&#xff1a;动态规划 动态规划解决问题的步骤&#xff1a;1.理解题意。题目要求只返回结果&#xff0c;不要求得到最大的连续子数组的哪一个&#xff0c;这样的问题常常可以用动态规划。 2.定义子问题&#xff1a;eg&#xff1a;以 −…...

编程日记 2025/6/29 10:10:21

【Redis】有序集合类型Sortedset 常用命令详解

此类型和 set 一样也是 string 类型元素的集合&#xff0c;且不允许重复的元素 不同的是每个元素都会关联一个double类型的分数&#xff0c;redis正是通过分数来为集合中的成员进行从小到大的排序 有序集合的成员是唯一&#xff0c;但分数(score)却可以重复 1. zadd - 添加 语法…...

编程日记 2025/6/29 11:37:48

前缀和-724.寻找数组的中心下标-力扣(LeetCode)

一、题目解析 我们需要求出中心下标处两边的和是否相等。 二、算法解析 解法1&#xff1a;暴力枚举 O(n*2)(时间复杂度) 固定i&#xff0c;计算[0,i-1]的和&#xff0c;计算[i1,n-1]的和&#xff0c;然后比较是否相等。遍历i为n次&#xff0c;每次计算n-1个数据的值&#xff…...

编程日记 2025/6/29 9:55:31

缓存与数据库数据一致性：旁路缓存、读写穿透和异步写入模式解析

旁路缓存模式、读写穿透模式和异步缓存写入模式是三种常见的缓存使用模式&#xff0c;以下是对三种经典缓存使用模式在缓存与数据库数据一致性方面更全面的分析&#xff1a; 一、旁路缓存模式&#xff08;Cache - Aside Pattern&#xff09; 1.数据读取流程 应用程序首先向缓…...

编程日记 2025/6/29 9:19:04

HTML邮件背景图兼容 Outlook

在 HTML 邮件中设置背景图片时&#xff0c;Outlook&#xff08;尤其是桌面版的 Outlook for Windows&#xff09;经常不会正确显示背景图&#xff0c;这是因为outlook 是使用 Word 作为邮件渲染引擎&#xff0c;而不是标准的 HTML/CSS 渲染方式。 推荐的解决方案&#xff1a;使…...

编程日记 2025/6/29 12:27:46

Linux之七大难命令（The Seven Difficult Commands of Linux）

Linux之七大难命令 、背景 作为Linux的初学者&#xff0c;肯定要先掌握高频使用的指令&#xff0c;这样才能让Linux的学习在短时间内事半功倍。但是&#xff0c;有些指令虽然功能强大&#xff0c;但因参数多而让初学者们很害怕&#xff0c;今天介绍Linux中高频使用&#xff0…...

编程日记 2025/6/29 11:43:32