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

Vue下 Sortable 实现 table 列表字段可拖拽排序，显示隐藏组件开发

news 来源：原创 2025/7/16 14:29:17

vue 开发table 列表时，需要动态调整列字段的顺序和显示隐藏

实现效果如图所示：

在这里插入图片描述

vue 组件代码

<template><div style="width: 90%; margin: 0 auto;"><el-table :data="tableData" border="" ref="tableNode" @selection-change="handleSelectionChange" :height="windowHeight - 200" v-loading="loading" row-key="field"><el-table-column type="selection" width="70"></el-table-column><el-table-column prop="fieldName" label="列名"></el-table-column><el-table-column prop="sortNum" label="排序"><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column></el-table><div style="display: flex; justify-content: flex-end; padding-top: 20px;"><el-button @click="reset" size="mini">取消</el-button><el-button type="primary" @click="submit" size="mini">保存</el-button></div></div>
</template><script>
import { setPageFieldSort, getPageFieldSort } from "@/api/public";
import Sortable from "sortablejs";export default {name: 'listFieldSet',data() {return {pageName: "",tableData: [],multipleSelection: [],selectedRowsBackup: [],loading: false,windowHeight: window.innerHeight,}},updated() {this.$nextTick(() => {this.$refs.tableNode.doLayout()})},mounted() {window.addEventListener('resize', this.handleResize);},beforeDestroy() {window.removeEventListener('resize', this.handleResize);},methods: {handleResize() {this.windowHeight = window.innerHeight;},initData(pageName) {this.pageName = pageName;if (this.tableData && this.tableData.length === 0) {this.loading = true;getPageFieldSort({'pageName': pageName}).then(res => {this.tableData = res.data;if (this.tableData) {this.tableData.forEach(item => {if (item.isShow) {this.multipleSelection.push(item.field);this.$nextTick(() => {this.$refs.tableNode.toggleRowSelection(item, true);});}});}}).finally(() => {this.loading = false;});//声明表格拖动排序方法this.pullSort();}},//    //表格拖动排序方法pullSort() {// 通过ref获取Dom节点const el = this.$refs.tableNode.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];this.sortable = Sortable.create(el, {animation: 200, //拖拽动画(毫秒)setData: function (dataTransfer) {dataTransfer.setData("Text", "");},onStart: () => {// 拖拽开始前保存当前选中的行this.selectedRowsBackup = [...this.multipleSelection];},// 结束拖拽onEnd: (evt) => {const movedItem = this.tableData.splice(evt.oldIndex, 1)[0];this.tableData.splice(evt.newIndex, 0, movedItem);this.$nextTick(() => {this.selectedRowsBackup.forEach(row => {const targetRow = this.tableData.find(item => item.field === row);if (targetRow) {this.$refs.tableNode.toggleRowSelection(targetRow, true); // 重新选中}});})},});},handleSelectionChange(rows) {this.multipleSelection = rows.map(row => row.field);},reset() {this.$emit('close');},submit() {this.loading = true;this.tableData.forEach(item => {item.isShow = this.multipleSelection.findIndex(row => row === item.field) > -1;});setPageFieldSort({'fields': this.tableData,'pageName': this.pageName}).then(res => {this.$message.success("保存成功");}).finally(() => {this.loading = false;});},}
}
</script>

列表字段实例数据

[{"id": 449,"userCode": "klfadmin","field": "id","pageName": "projectLaborManagement","sortNum": 1,"isShow": 1,"fieldName": "序号"},{"id": 450,"userCode": "klfadmin","field": "title","pageName": "projectLaborManagement","sortNum": 2,"isShow": 1,"fieldName": "劳务标题"},{"id": 451,"userCode": "klfadmin","field": "state","pageName": "projectLaborManagement","sortNum": 3,"isShow": 1,"fieldName": "状态"}
]

代码说明

template 普通的表格列表展示，主要展示所有的可设置的字段
- @selection-change 勾选时触发事件，存储一下勾选项，记录的是每行的 field 字段
- :height 是设置容器的高度，此处是自动适应窗口高度。实现逻辑可参考前面的文章
initData 方法，加载列表字段，见上的实例数据，此处是接口加载。请求的数据是第4步存储的数据。
- this.$refs.tableNode.toggleRowSelection(item, true);接口请求到数据后，遍历数组，触发勾选项默认勾选
- 注意点：
  - 数据未完全渲染到表格前，尝试操作选中状态，toggleRowSelection 是失效的。
  - 使用 $nextTick 确保 DOM 更新后再操作选中，此处我就踩坑了，没有用$nextTick ，导致一直失效，好久才反应过来。
pullSort 触发表格拖动排序方法
- setData 解决 Firefox 浏览器拖拽时的兼容性问题，避免出现禁止拖拽的图标。
- onStart 拖拽开始前，将选中的数据备份一下。踩坑，因为拖拽过程中重新渲染了表格数据，导致选中状态丢失，大家可测试打印一下，看看是否丢失。
- onEnd 拖拽结束时的回调函数
  - evt.oldIndex 和 evt.newIndex
    - Sortable.js 提供的拖拽事件参数，表示拖拽前后的位置索引。
  - 数组元素移动逻辑
    - splice(evt.oldIndex, 1)[0]：从原位置删除元素并返回该元素。
    - splice(evt.newIndex, 0, movedItem)：将元素插入新位置。
  - this.$nextTick
    - 确保 DOM 更新完成后再操作选中状态，避免因异步渲染导致的行选中失效。
  - 恢复选中状态的逻辑
    - selectedRowsBackup：拖拽前备份的选中行字段（如 [‘field1’, ‘field2’]）。
    - this.tableData.find(item => item.field === row)：根据 field 找到拖拽后的行对象。
    - toggleRowSelection(targetRow, true)：手动设置行选中（需配合表格 ref）。
submit 提交保存，将排序后的数组保存下来，并且同时保存一下选中状态。

Sortable.js 完整流程图

开始拖拽→ 备份选中行 (onStart)→ 移动数据 (onEnd)→ 等待DOM更新 ($nextTick)→ 遍历备份的选中字段→ 找到新位置的行对象→ 重新选中 (toggleRowSelection)
结束

父组件使用方式

Drawer 抽屉组件加载子组件设置

	<el-drawer title="列表设置" :visible.sync="listFieldSet.dialogVisible" size="20%" direction="rtl"><listFieldSet ref="listFieldSetRef" @close="listFieldSet.dialogVisible = false"></listFieldSet></el-drawer>

父组件使用

<template><el-table :data="tableData" v-loading="loading" border style="width: 100%" ref="table"><template v-for="(item, index) in listFieldData"><el-table-column v-if="item.isShow" :key="index" :prop="item.field" :label="item.fieldName" width="120"><template slot-scope="scope"><span v-if="item.field === 'proName'">{{ scope.row.project ? scope.row.project.proName : '' }}</span><span v-else>{{ scope.row[item.field] || '' }}</span></template></el-table-column></template><el-table-column label="操作" fixed="right"></el-table-column></el-table>
</template>

使用的场景和方式非常多，上面我是用遍历+判断，正常渲染排序后的列表字段。大家理解后可以灵活应对类似需求

Vue下 Sortable 实现 table 列表字段可拖拽排序，显示隐藏组件开发

vue 开发table 列表时，需要动态调整列字段的顺序和显示隐藏实现效果如图所示： vue 组件代码 <template><div style"width: 90%; margin: 0 auto;"><el-table :data"tableData" border"" ref"table…...

编程日记 2025/7/16 14:29:17

Apache Shiro 全面指南：从入门到高级应用

一、Shiro 概述与核心架构 1.1 什么是 Shiro？ Apache Shiro 是一个强大且易用的 Java 安全框架，它提供了认证（Authentication）、授权（Authorization）、加密（Cryptography）和会话管…...

编程日记 2025/7/12 5:47:16

高速电路中的存储器应用与设计三

4 DDR2 SDRAM 介绍及其应用要点 1. DDR2 SDRAM 概述 DDR2（Double Data Rate 2，两倍数据速率，版本 2）SDRAM，是由 JEDEC 国际标准组织开发的、基于 DDR SDRAM 的、升级的存储技术。与 DDR SDRAM 相比，虽然其…...

编程日记 2025/7/16 14:21:15

AndroidStudio无法识别连接夜神模拟器

下载夜神模拟器： https://www.yeshen.com/ 启动之后发现AS关联不了夜神模拟器，需要做如下的操作。 1：复制配置文件进入夜神模拟器 adb 相关的更改： 开启的命令是： 端口启动固定： 夜神模拟器&#xff…...

编程日记 2025/7/11 22:28:21

Go 语言标准库中database模块详细功能介绍与示例

Go语言的标准库 database/sql 提供了与 SQL 数据库交互的通用接口，但需要搭配具体的数据库驱动（如 MySQL、PostgreSQL 等）使用。以下是 database/sql 的核心方法及示例说明： 1. 连接数据库 sql.Open(driverName, dataSourceName)…...

编程日记 2025/7/15 21:33:27

ai-api-union项目，适配各AI厂商api

项目地址：alpbeta/ai-api-union 需求：实现兼容各大模型厂商api的流式对话和同步对话接口，本项目现兼容智谱、豆包、通义、通义版deepseek 设计一个ChatController类对外暴露这两个接口，入参都为ChatRequest请求类，…...

编程日记 2025/7/12 23:46:57

进程间通信——信号量

进程间通信——信号量目录一、基本概念 1.1 概念 1.2 基本操作 1.3 相关函数 1.3.1 semget创建/获取 1.3.2 semop操作信号量 1.3.3 semctl初始化/删除二、代码操作 2.1 不用PV的 2.2 用PV 的 2.2.1 a.c 2.2.2 b.c 2.2.3 sem.h 2.2.4 sem.c 一、基本概念 1.1…...

编程日记 2025/7/16 13:40:27

CSS 如何设置父元素的透明度而不影响子元素的透明度

CSS 如何设置父元素的透明度而不影响子元素的透明度在 CSS 中，设置父元素的透明度（如通过 opacity 属性）会影响所有子元素的透明度，因为 opacity 是作用于整个元素及其内容的。如果想让父元素透明但不影响子元素的透明度&#x…...

编程日记 2025/7/16 13:58:32

SpringBean模块（一）定义如何创建生命周期

一、介绍 1、简介在 Spring 框架中，Bean 是指由 Spring 容器管理的 Java 对象。Spring 负责创建、配置和管理这些对象，并在应用程序运行时对它们进行依赖注入（Dependency Injection，DI）。通俗地讲，Sp…...

编程日记 2025/7/16 14:11:32

2007-2019年各省地方财政一般公共服务支出数据

2007-2019年各省地方财政一般公共服务支出数据 1、时间：2007-2019年 2、来源：国家统计局、统计年鉴 3、指标：行政区划代码、地区、年份、地方财政一般公共服务支出 4、范围：31省 5、指标说明：地方财政一般公共服务…...

编程日记 2025/7/10 19:59:02

S32K144外设实验（六）：FTM输出单路PWM

文章目录 1. 概述1.1 时钟系统1.2 实验目的2. 代码的配置2.1 时钟配置2.2 FTM模块配置2.3 输出引脚配置2.4 API函数调用1. 概述 1.1 时钟系统 FTM的CPU接口时钟为SYS_CLK，在RUN模式下最高80MHz。模块的时钟结构如下图所示。从上图中可以看出，FTM模块的功能时钟为SYS_CLK，…...

编程日记 2025/7/16 14:24:13

二层综合实验

拓扑图实验要求 1.内网IP地址使用172.16.6.0/16分配 2.sw1和sW2之间互为备份 3.VRRP/STP/VLAN/Eth-trunk均使用 4.所有Pc均通过DHCP获取IP地址 5.ISP只能配置IP地址 6.所有电脑可以正常访问IsP路由器环回实验思路这是一个二层综合实验每当拿到一个实验看清楚要求之后都有…...

编程日记 2025/7/15 10:05:38

《深度剖析SQL之WHERE子句：数据过滤的艺术》

在当今数据驱动的时代，数据处理和分析能力已成为职场中至关重要的技能。SQL作为一种强大的结构化查询语言，在数据管理和分析领域占据着核心地位。而WHERE子句，作为SQL中用于数据过滤的关键组件，就像是一把精准的手术刀&#xff0c…...

编程日记 2025/7/16 14:09:27

Python每日一题(7)

Python每日一题 2025.3.27 一、题目二、分析三、自己源代码四、deepseek答案五、源代码与ai分析一、题目 question["""编写程序,生成包含20个随机数的列表,然后将前十个元素升序排列,后10个元素降序排列,并输出结果""" ]二、分析今天本来写了…...

编程日记 2025/7/10 9:43:53

Linux命令大全：从入门到高效运维

适合人群：Linux新手 | 运维工程师 | 开发者目录一、Linux常用命令（每天必用） 1. 文件与目录操作 2. 文件内容查看与编辑二、次常用命令（按需使用） 1. 系统管理与监控 2. 网络与通信 3. 权限与用户管理三、…...

编程日记 2025/7/10 12:41:46

Xss复现

目录前提： 1.什么是XSS 2.XSS 的三种主要类型复现第1关第2关前提： 1.什么是XSS XSS（跨站脚本攻击，Cross-Site Scripting） 是一种常见的 Web 安全漏洞，攻击者通过向网页注入恶意脚本&#xff…...

编程日记 2025/7/16 14:07:23

完成分割回文串的算法题，难点主要在如何去分割，靠什么去分割字符串 int a(char arr[]){int i,j;int lenstrlen(arr);for(i0,jlen-1;i<j;i,j--){if(arr[i]!arr[j]) return 0;}return 1;}char **path;int pathtop;char***reasult;int*ansize;int count…...

编程日记 2025/7/14 23:29:13

【MySQL基础】数据库及表基本操作

作为运维工程师，掌握MySQL的基础操作是日常工作的重要技能之一。本文将介绍MySQL中数据库和表的基本操作，帮助您快速上手或复习这些核心概念。 1 数据库基本操作 1.1 创建数据库 create database db_name; -- 指定字符集和排序规则 create database d…...

编程日记 2025/7/16 14:03:41

注意！ChatGPT 全新 AI 图像功能延迟对免费用户开放

2025 年 3 月 25 日，OpenAI 正式宣布在 ChatGPT 中推出基于 GPT-4o 模型的全新原生图像生成功能。这一功能允许用户通过对话生成和编辑图像，支持从写实风格到插图风格的多种形式。OpenAI 首席执行官萨姆・奥特曼（Sam Altman）在社…...

编程日记 2025/7/16 14:19:57

玛哈特液压式精密矫平机——以精准压力，定义金属的绝对服从

板材应力不除，良率难升。液压式精密矫平机，凭借多级液压闭环技术AI动态补偿算法，攻克0.2mm超薄钛箔至65mm装甲钢板的矫平极限，平整度精度锁定0.012mm，残余应力≤3MPa，让金属从“形似平整”迈向“分子级稳定…...

编程日记 2025/7/16 1:43:29

HCIA【NAT】

目录 1 NAT产生背景 2 NAT作用 3 NAT分类 NAT（网络地址转换技术） 1 NAT技术产生背景 [1] IPV4地址不够用 [2] 处于IPV4到IPV6的一个过渡阶段，IPV6地址还没有完全普及 2 作用 [1] 解决IP地址不够用的问题 [2] 做公网和私网地址的转换 …...

编程日记 2025/7/16 14:00:58

Reactor 事件流 vs. Spring 事件 (ApplicationEvent)

Reactor 事件流 vs. Spring 事件 ApplicationEvent Reactor 事件流 vs. Spring 事件 (ApplicationEvent)1️⃣ 核心区别2️⃣ Spring 事件 (ApplicationEvent)✅ 示例：Spring 事件发布 & 监听1️⃣ 定义事件2️⃣ 发布事件3️⃣ 监听事件🔹 进阶&…...

编程日记 2025/7/15 15:06:04

Google开源机器学习框架TensorFlow探索更多ViT优化

一、在边缘设备优化ViTa 在边缘设备上优化 ViT（Vision Transformer）模型，主要目标是减少计算量、降低功耗、提升推理速度。以下是几种关键优化策略： 1.轻量级 ViT 变体部分 ViT 变体专为边缘设备优化，包括&#xf…...

编程日记 2025/6/28 4:39:45

docker - compose up - d`命令解释，重复运行会覆盖原有容器吗

docker - compose up - d`命令解释，重复运行会覆盖原有容器吗 docker - compose up - d 是一个用于管理 Docker 容器的命令，具体含义如下：命令含义： up：用于创建、启动并运行容器，会根据 docker - compose.yml 文件中定义的服务配置来操作。-d：表示以“分离模式”（det…...

编程日记 2025/7/16 14:19:57

火山dts迁移工具使用

登录后选择生态工具。（数据库传输服务DTS) 先选region 创建迁移任务假设，mysql 选择专有网络(一般上云到火山都是专有网络） 【先选】结构迁移，全量，这些【再选】迁移对象 （他们产研有bug，先…...

编程日记 2025/7/9 11:19:59

Tabby 一：如何在Mac配置保姆级教程(本地模型替换hugging face下载)

1. brew安装 mac需要先安装brew，如果本地已经安装过brew这一步可以忽略，遇到问题可以自己ai问 /bin/bash -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 可能遇到source .zprofile失败，因为…...

编程日记 2025/7/16 14:04:48

Go 语言标准库中time模块详细功能介绍与示例

以下是 Go 语言 time 模块的详细说明及示例，涵盖时间操作、定时器、时区处理等核心功能： 一、时间基础操作 1. 获取时间 // 当前本地时间 now : time.Now() fmt.Println(now) // 2023-08-04 15:30:45.123456 0800 CST// 构造指定时间 t : time.Date(20…...

编程日记 2025/7/15 1:19:28

做的一些实验

先在DRMPlane::Perform函数里，把PLANE_SET_SRC_RECT或者PLANE_SET_DST_RECT设置的DRMProperty::SRC_W DRMProperty::SRC_H或者DRMProperty::CRTC_W DRMProperty::CRTC_H设置为原来1/2，都无法启动Android界面。后来思考了一下，Log里好像打印…...

编程日记 2025/7/16 1:52:09

计算机网络基础：网络流量工程与优化策略

计算机网络基础：网络流量工程与优化策略一、前言二、网络流量工程基础2.1 网络流量工程的定义与目标2.2 网络流量的测量与分析2.2.1 常用的流量测量方法2.2.2 流量数据分析三、网络流量工程的优化策略3.1 链路负载均衡策略3.1.1 基于目的地址的负载均衡3.1.2 基于流量权重的负…...

编程日记 2025/7/16 8:40:15

Python入门学习笔记 - 从环境搭建到基础语法

一、前期准备工作 1. 系统环境配置防火墙设置与网络连接检查 2. 网络查看二、计算机基础知识 1. 硬件系统 2. 计算机系统组成三、Python简介 1. Python的特点 2. Python安装注意事项四、Python基础语法 1. 注释的分类 2. IDE使用技巧字体大小随滚轮滑动设置 3.…...

编程日记 2025/7/15 13:56:33

重温：时间窗口与滑动步长的概念

核心概念窗口大小（Window Size） 定义窗口包含的时间步数（如过去7天、24小时等）。例如，窗口大小为5时，每个窗口包含连续的5个时间点数据。滑动步长（Step/Stride） 窗口每次向前移动…...

编程日记 2025/7/16 14:18:52

数据库——MySQL字符、日期函数

一、字符函数详解 1. CONCAT() - 字符串拼接作用：连接多个字符串，类似Java中的号。语法： CONCAT(string1, string2, ...) 示例： SELECT CONCAT(Hello, , World) AS greeting; -- 输出：Hello World 2. UPPER()…...

编程日记 2025/7/16 14:04:48

Vue3.5 企业级管理系统实战（十一）：全屏切换组件

本篇主要探讨如何在导航栏（Navbar）中添加全屏切换按钮，并借助功能强大的 screenfull 插件，丝滑实现全屏切换功能，为用户打造更为便捷、流畅的交互体验。 1 安装插件 screenfull screenfull 是一个轻量级的 JavaScript…...

编程日记 2025/7/15 11:29:41

HAL_UARTEx_ReceiveToIdle_DMA 开启，但是无法进入空闲中断；

HAL_UART_Receive_IT HAL_UARTEx_ReceiveToIdle_DMA 解决措施，关闭HAL_UART_Receive_IT函数； 因为这个函数会开启start_receive 函数中断，这个函数将标志位一直置busy，导致一直没有进入空闲中断设置；...

编程日记 2025/6/28 4:54:52

第30周Java分布式入门分布式基础

分布式基础课程笔记一、什么是分布式？ 1. 权威定义分布式系统定义为：“利用物理架构形成多个自治的处理元素，不共享主内存，通过发送消息合作”。 2. 核心解释物理架构与处理元素 🌟 多台独立服务器/电脑&#x…...

编程日记 2025/7/16 14:16:32

【商城实战(82)】区块链赋能用户身份验证：从理论到源码实践

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配&#xf…...

编程日记 2025/7/16 14:11:33

一周掌握Flutter开发--9. 与原生交互（上）

文章目录 9. 与原生交互核心场景9.1 调用平台功能：MethodChannel9.1.1 Flutter 端实现9.1.2 Android 端实现9.1.3 iOS 端实现9.1.4 使用场景 9.2 使用社区插件9.2.1 常用插件9.2.2 插件的优势总结 9. 与原生交互 Flutter 提供了强大的跨平台开发能力，但…...

编程日记 2025/7/16 4:56:09

DeepSeek-V3-0324对比OpenAI GPT-4o和Gemini 2.5 Pro

以下是DeepSeek-V3-0324、OpenAI GPT-4o与谷歌Gemini 2.5 Pro模型的更新点及优化对比总结： 1. DeepSeek-V3-0324 开源地址：https://huggingface.co/deepseek-ai/DeepSeek-V3-0324 核心更新与优化性能提升： 采用6850亿参数MoE架构&#xff…...

编程日记 2025/6/28 4:10:38

【AI论文】LEGO拼图：大型语言模型在多步骤空间推理方面的表现如何？

摘要：多步骤空间推理涉及跨多个顺序步骤理解和推理空间关系，这对于解决复杂的现实世界应用至关重要，如机器人操作、自主导航和自动化装配。为了评估当前多模态大型语言模型（MLLMs）在获取这一基本能力方面的表现&#x…...

编程日记 2025/7/15 13:10:34

【深度学习】【目标检测】【OnnxRuntime】【C++】YOLOV5模型部署

【深度学习】【目标检测】【OnnxRuntime】【C】YOLOV5模型部署提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论文章目录【深度学习】【目标检测】【OnnxRuntime】【C】YOLOV5模型部署前言Windows平台搭建依赖环境模型转换--pytorch转onnxONNXRuntime推…...

编程日记 2025/7/10 21:56:15

vcpkg安装指定版本的库

一.vcpkg安装使用git将vcpkg源码克隆到本地制定目录（D:\vcpkg），并初始化 git clone https://github.com/microsoft/vcpkg.git cd vcpkg ./bootstrap-vcpkg.sh # Linux/macOS .\bootstrap-vcpkg.bat # Windows 如下图： 二.安…...

编程日记 2025/7/15 13:46:47

springboot 四层架构之间的关系整理笔记五

问题：service 和多个serviceimpl 分层之间的逻辑关系？ 好的！用班级活动的例子继续讲，假设班长（Service接口）要管理多种任务，而不同的班委（ServiceImpl实现类）负责不同场…...

编程日记 2025/7/14 1:29:59

记录一次交易耗时有毛刺TDSQL数据库排查过程

信息同步非常重要，解决问题前，务必从应用获取实例信息、sql关键字、问题时间段、问题描述。处理步骤： 1、登陆赤兔，打开实例监控信息，检查CPU、内存、IO、缓冲命中率、proxy汇总请求量耗时情况，初步判断…...

编程日记 2025/7/8 16:17:13

爱普生晶体单元FC2012AN在5G RedCap中的应用

在 5G 技术向物联网领域深度渗透的今天，RedCap（5G 轻量化）作为衔接中高速物联网场景的关键技术，正加速推动工业、医疗、可穿戴等领域的智能化升级。爱普生 FC2012AN 低 ESR 晶体单元凭借其突破性的小尺寸、低功耗与高稳定性设计&a…...

编程日记 2025/7/16 9:16:46

Linux: 网络，arp的数量为什么会对交换机/路由器有性能的影响

这个问题也是非常普遍的问题。比如最近比较火的一个OVS相关的问题： ARP request packets put high pressure on the pinctrl thread in ovn-controller 另一个在工作种也遇到了相似的问题，当一个网络里发了同时发了小一百个GARP之后，路由器的gateway就会有ARP处理延迟。 A…...

编程日记 2025/7/15 18:12:06

javaWeb vue的简单语法

一、简介两大核心优势： 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 D…...

编程日记 2025/7/10 19:21:18

Android 中隐藏标题栏和状态栏的方法

在Android开发中，隐藏标题栏和状态栏是实现全屏显示的常见需求。一、隐藏标题栏 1、通过代码隐藏对于继承自 AppCompatActivity 的 Activty，可在 onCreate() 方法中调用supportRequestWindowFeature 或 getSupportActionBar 方法来隐藏标题栏。 ove…...

编程日记 2025/7/11 16:50:56