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

Table类型的表单

news 来源：原创 2025/8/17 20:23:47

形如下面的图片
在这里插入图片描述
1 label与prop属性

const columns=[{label: "文件名",prop: "fileName",scopedSlots: "fileName",},{ label: "删除时间",prop: "recoveryTime",width: "200",},{ label: "大小",prop: "fileSize",scopedSlots: "fileSize",width: "200",},
];
const tableData = ref({});
const tableOptions = {extHeight: 20,
};

**label：**表示列的标题，即表头的内容。
**prop：**表示列对应的数据字段，指定从 tableData 中获取哪一列的数据来显示。

2 scopedSlots（作用域插槽名称）属性

A Table（子组件）组件中

<template><div><el-tableref="dataTable":data="dataSource.list || []":height="tableHeight":stripe="options.stripe":border="options.border"header-row-class-name="table-header-row"highlight-current-row@row-click="handleRowClick"@selection-change="handleSelectionChange"><!-- :stripe="options.stripe" 斑马纹 --><!--selection选择框--><el-table-columnv-if="options.selectType && options.selectType == 'checkbox'"type="selection"width="50"align="center"></el-table-column><!--序号--><el-table-columnv-if="options.showIndex"label="序号"type="index"width="60"align="center"></el-table-column><!--数据列--><template v-for="(column, index) in columns"><template v-if="column.scopedSlots"><el-table-column:key="index":prop="column.prop":label="column.label":align="column.align || 'left'":width="column.width"><template #default="scope"><slot:name="column.scopedSlots":index="scope.$index":row="scope.row"></slot></template></el-table-column></template><template v-else><el-table-column:key="index":prop="column.prop":label="column.label":align="column.align || 'left'":width="column.width":fixed="column.fixed"></el-table-column></template></template></el-table><!-- 分页 --><divclass="pagination"v-if="showPagination"><el-paginationv-if="dataSource.totalCount"background:total="dataSource.totalCount":page-sizes="[15, 30, 50, 100]":page-size="dataSource.pageSize":current-page.sync="dataSource.pageNo":layout="layout"@size-change="handlePageSizeChange"@current-change="handlePageNoChange"style="text-align: right"></el-pagination></div></div>
</template>
<script setup>
import { ref, computed } from "vue";const emit = defineEmits(["rowSelected", "rowClick"]);
const props = defineProps({dataSource: Object,showPagination: {type: Boolean,default: true,},showPageSize: {type: Boolean,default: true,},options: {type: Object,default: {extHeight: 0,showIndex: false,},},columns: Array,fetch: Function, // 获取数据的函数initFetch: {type: Boolean,default: true,},
});const layout = computed(() => {return `total, ${props.showPageSize ? "sizes" : ""}, prev, pager, next, jumper`;
});
//顶部 60 , 内容区域距离顶部 20， 内容上下内间距 15*2  分页区域高度 46
const topHeight = 60 + 20 + 30 + 46;const tableHeight = ref(props.options.tableHeight? props.options.tableHeight: window.innerHeight - topHeight - props.options.extHeight
);//初始化
const init = () => {if (props.initFetch && props.fetch) {props.fetch();}
};
init();const dataTable = ref();
//清除选中
const clearSelection = () => {dataTable.value.clearSelection();
};//设置行选中
const setCurrentRow = (rowKey, rowValue) => {let row = props.dataSource.list.find((item) => {return item[rowKey] === rowValue;});dataTable.value.setCurrentRow(row);
};
//将子组件暴露出去，否则父组件无法调用，这两个方法在改项目中没有用到
defineExpose({ setCurrentRow, clearSelection });//行点击，点击行的任意位置，都可以选中
const handleRowClick = (row) => {dataTable.value?.toggleRowSelection(row);emit("rowClick", row);
};//多选
const handleSelectionChange = (row) => {emit("rowSelected", row);
};//切换每页大小
const handlePageSizeChange = (size) => {props.dataSource.pageSize = size;props.dataSource.pageNo = 1;props.fetch();
};
// 切换页码
const handlePageNoChange = (pageNo) => {props.dataSource.pageNo = pageNo;props.fetch();
};
</script>
<style lang="scss" scoped>
.pagination {padding-top: 10px;padding-right: 10px;
}
.el-pagination {justify-content: right;
}:deep(.el-table__cell) {padding: 4px 0px;
}
</style>

B 父组件中引用Table组件

<Table:columns="columns":showPagination="true":dataSource="tableData":fetch="loadDataList":initFetch="false":options="tableOptions"@rowSelected="rowSelected"@rowClick="rowClick">
</Table>

<script setup>
//列表
const tableData = ref({});
const tableOptions = {extHeight: 50,selectType: "checkbox",
};//多选 批量选择
const selectFileIdList = ref([]);
const rowSelected = (rows) => {selectFileIdList.value = [];rows.forEach((item) => {selectFileIdList.value.push(item.userId + "_" + item.fileId);});
};
</script>

如果columns数组对象中有scopedSlots（作用域插槽名称）属性，用来指定插槽名称，则可以在父组件中自定义一个插槽代替如下部分，若无，就按照Table组件中的方式去渲染

<template #插槽名字="{index,row}">
</template>

比如说在分享页面中，自定义一个fileName插槽代替如上部分

<template #fileName="{index,row} ">
</template>
<script setup>
const columns = [{label: "文件名",prop: "fileName",scopedSlots: "fileName",},]</script>

Table类型的表单

形如下面的图片 1 label与prop属性 const columns[{label: "文件名",prop: "fileName",scopedSlots: "fileName",},{ label: "删除时间",prop: "recoveryTime",width: "200",},{ label: "大小",prop:…...

编程日记 2025/8/17 20:23:47

Spring 中的验证、数据绑定和类型转换

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，…...

编程日记 2025/8/17 10:25:12

【技术派后端篇】canal实现MySQL/Redis缓存一致性

1 前言在探讨如何利用canal实现MySQL/Redis缓存一致性之前，强烈建议大家先阅读以下几篇相关文章，因为本文是基于这些文章的基础上展开的： 《深度剖析 MySQL 与 Redis 缓存一致性：理论、方案与实战》 ：该文详细阐述了…...

编程日记 2025/8/17 1:56:12

华清远见STM32F103智能小车重磅上线！循迹避障红外遥控WiFi远程控制，0基础小白从入门到单片机软硬件项目实战！

STM32F103智能云控小车是由华清远见倾力打造的一款多功能智能小车，专为高校教学、学生毕业设计、创新竞赛、单片机入门学习及项目实践量身定制。这款小车集红外遥控、远程物联网控制、智能巡线、高精度避障和交互式显示屏五大核心功能于一体，融合了物联网…...

编程日记 2025/8/17 20:22:28

李飞飞团队新作WorldScore：“世界生成”能力迎来统一评测，3D/4D/视频模型同台PK

从古老神话中对世界起源的幻想，到如今科学家们在实验室里对虚拟世界的构建，人类探索世界生成奥秘的脚步从未停歇。如今，随着人工智能和计算机图形学的深度融合，我们已站在一个全新的起点，能够以前所未有的精度和效率去…...

编程日记 2025/8/17 18:18:28

seaborn库详解

Seaborn 是一个基于 Python 的统计数据可视化库，它建立在 matplotlib 之上，旨在提供更高级、更美观、更具统计意义的可视化功能。 CONTENT 1. 单变量分布可视化功能代码 2. 双变量联合分布可视化功能代码 3. 分类数据柱状图可视化功能代码 4. 箱线图可视…...

编程日记 2025/8/17 18:18:25

UNACMS PHP对象注入漏洞复现（CVE-2025-32101）（附脚本）

免责申明：本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权，请及时与我们联系，我们将尽快处理并删除相关内容。前言…...

编程日记 2025/8/17 2:32:22

应用篇02-镜头标定（上）

本节主要介绍相机的标定方法，包括其内、外参数的求解，以及如何使用HALCON标定助手实现标定。计算机视觉——相机标定(Camera Calibration)_摄像机标定-CSDN博客 1. 原理本节介绍与相机标定相关的理论知识，不一定全，可以参考相…...

编程日记 2025/8/17 21:29:05

游戏引擎学习第230天

回顾并为今天的内容定下基调今天是我们进行“排序”工作的第二天。昨天我们在渲染器中实现了排序功能。这其实是从一开始就知道必须做的事情，只是一直没有合适的时机。而昨天终于迎来了这个时机，不知道为什么，可能就是突然有了冲动和想法&a…...

编程日记 2025/8/17 18:00:25

3.串口通信之SPI

—>1.串口通信之UART见这篇<— —>2.串口通信之IIC见这篇<— 1.SPI特点 SPI（Serial Peripheral Interface)即串行外设接口，有4条总线，分别是SCLK(SPI Clock)，MISO(Master Input Slave Output)，MOSI(Mast…...

编程日记 2025/8/17 20:06:08

无人机姿态稳定与动态控制模块概述！

一、设计难点 1. 动态算力需求与硬件能力的不匹配** 无人机边缘计算设备通常受限于体积和重量，导致其计算单元（如CPU、GPU）的算力有限，难以应对突发的高负载任务（如实时图像处理、AI推理）。挑战&am…...

编程日记 2025/8/17 21:35:35

【shell】终端文本的颜色和样式打印

在Shell脚本中，\033[XXm 是 ANSI转义序列，用于控制终端文本的颜色和样式。以下是完整的颜色和样式代码列表： 1. 基本格式 echo -e "\033[CODEm你的文本\033[0m"\033[：转义序列开始（\e[ 或 \x1b[ 等效&#…...

编程日记 2025/8/17 20:47:02

safetensors_rust.SafetensorError: Error while deserializing header: HeaderTooLarge 问题代码： model AutoModelForVision2Seq.from_pretrained( "/data-nvme/yang/Qwen2.5-VL-32B-Instruct", trust_remote_codeTrue, torch_dtypetorc…...

编程日记 2025/8/17 12:29:58

HCIA-Access V2.5_16_3_数据业务维护

查询ONT上的业务配置查询ONU上的业务配置查询OLT上网业务查询上网业务流量查询上网业务相关MAC地址删除故障ONT 删除故障ONU...

编程日记 2025/8/17 18:18:35

Java设计开发商城抢票功能

在开发一个商城抢购功能时，需要考虑几个关键方面，包括并发控制、数据一致性、用户体验以及系统的可扩展性。下面我将通过一个简单的步骤指南来介绍如何设计这样一个功能。 1. 需求分析首先，明确抢购功能的需求： 限制购买数量。…...

编程日记 2025/8/17 21:39:40

【APM】Build an environment for Traces, Metrics and Logs of App by OpenTelemetry

系列文章目录此系列文章介绍如何搭建Observability（可观测性）环境(Opentelemetry-Collector、Tempo、Prometheus、Loki和Grafana)，以及应用。【APM】Observability Solution 【APM】Build an environment for Traces, Metrics and Logs …...

编程日记 2025/8/17 21:13:05

全自动驾驶（FSD，Full Self-Driving）自动驾驶热点技术的成熟之处就是能判断道路修复修路，能自动利用类似“人眼”的摄像头进行驾驶！值得学习！

全自动驾驶（FSD，Full Self-Driving）软件是自动驾驶领域中的热点技术，其核心目标是实现车辆在各种复杂交通环境下的安全、稳定、高效自动驾驶。FSD软件的技术核心涉及多个方面的交叉技术，下面将详细分析说明其主要核心技…...

编程日记 2025/8/17 18:18:26

需要处理哪些响应数据？

在调用淘宝商品搜索 API 时，响应数据通常是一个 JSON 对象，包含了搜索结果的详细信息。以下是需要处理的主要响应数据字段及其说明： 响应数据结构示例 JSON 数据 JSON {"code": "0","errorMessage": &quo…...

编程日记 2025/8/17 18:18:23

【NLP 63、大模型应用 —— Agent】

人与人最大的差距就是勇气和执行力，也是唯一的差距 —— 25.4.16 一、Agent 相关工作二、Agent 特点核心特征： 1.专有场景（针对某个垂直领域） 2.保留记忆（以一个特定顺序做一些特定任务，记忆当前任务的前…...

编程日记 2025/8/17 20:01:27

Windows 图形显示驱动开发-WDDM 1.2功能—Windows 8 中的 DirectX 功能改进（三）

一、与目标无关的光栅化 (TIR) 独立于目标的光栅化 (TIR) 为涉及结构化图形的高质量抗锯齿的 Direct2D 使用方案提供高性能抗锯齿路径。 TIR 使 Direct2D 能够将光栅化步骤从 CPU 移动到 GPU，同时保留 Direct2D 抗锯齿语义和质量。使用此功能，软件层可…...

编程日记 2025/8/17 1:45:20

总结【过往部分项目经历二（计算机图形学方向）】

过往部分项目经历二 1.加强杆自动生成算法2.牙龈线序列批量算法3.光伏多阵列排布算法 1.加强杆自动生成算法介绍： 主要用于牙科正畸定制化应用。采用纯数字化技术，一键导入加强杆后，自动摆放、加强杆结构设计、网格重建、接触部分自动定位、…...

编程日记 2025/8/17 21:37:36

鸿蒙智行多款重磅新品发布，开启智慧出行新篇章

4月16日，鸿蒙智行新品发布会在上海隆重举办。问界M8、问界新M7全新配色、享界S9增程版上市；尊界S800内饰设计公布；SAIC尚界品牌首次官宣。本次发布会后，鸿蒙智行将在4月17日举办智界品牌之夜，携手用户共同探索未来出…...

编程日记 2025/8/17 21:01:26

冰川流域提取分析——ArcGIS pro

一、河网提取和流域提取视频详细GIS小熊 || 6分钟学会水文分析—河网提取（以宜宾市为例）_哔哩哔哩_bilibili 首先你要生成研究区域DEM，然后依次是填洼→流向→流量→栅格计算器→河网分级→栅格河网矢量化（得到河网.shp&#xff…...

编程日记 2025/8/17 18:18:44

SpringBoot——配置文件

目录前言 1.参数配置化 1.1使用application.properties 2.yml配置文件 3.ConfigurationProperties 3.1ConfigurationProperties 4.总结前言我们在配置一个类的对象属性时如果我们直接写在类里就属于硬编码，如果我们在做项目时每设计到一个第三方服务就将其…...

编程日记 2025/8/17 20:12:28

Lambda 函数与 peek 操作的使用案例

Lambda 函数和 peek 操作是 Java 8 Stream API 中非常有用的特性，下面我将介绍它们的使用案例。 Lambda 函数使用案例 Lambda 表达式是 Java 8 引入的一种简洁的匿名函数表示方式。集合操作 List<String> names Arrays.asList("Alice", "B…...

编程日记 2025/8/17 21:13:29

Java 中常用队列用法详解

Java 中常用队列用法详解在Java编程中，队列是一种非常重要的数据结构，广泛应用于任务调度、消息传递以及多线程通信等场景。以下将详细介绍几种常用的Java队列及其使用方法。 1. Queue 接口概述 Queue 是Java集合框架中的一个接口，它定义…...

编程日记 2025/8/17 18:18:41

IoT FEM射频前端模组芯片（2.4G PA）三伍微电子GSR2401 兼容替代RFX2401

型号：GSR2401应用：适用于蓝牙（BT）、ZigBee及物联网（IoT）设备功能：集成了功率放大器（PA）、开关（Switch）和低噪声放大器（LNA&#xff…...

编程日记 2025/8/17 20:00:08

android如何在生产环境中做到详实的日志收集而不影响性能？

在Android应用的生命周期中，日志收集贯穿于开发、测试到生产环境的每一个阶段。特别是在生产环境中，当应用部署到成千上万的用户设备上时，开发者无法直接访问用户的运行环境，也无法像在开发阶段那样通过调试工具实时查看代码执行情况。这时，日志就成为连接开发者与用户设备…...

编程日记 2025/8/17 20:38:01

深入解析 Linux 系统中的动静态库：从原理到实践

引言在 Linux 开发中，动态库（.so）和静态库（.a）如同软件开发的“乐高积木”，它们将代码模块化，提高复用性并优化系统资源。当你在终端输入 ls 时，背后可能依赖了数十个动态库&#…...

编程日记 2025/8/17 20:39:18

Django视图(未分离)

ListView、DetailView、CreateView、UpdateView 和 DeleteView 是 Django 框架中基于类的通用视图（Class-Based Generic Views） 配置 URL 路由在 urls.py 中为这些视图配置路由： from django.urls import path from .views import (PostLis…...

编程日记 2025/8/17 21:01:48

0基础 | 开发环境 |51单片机编译环境 Keil C251和C51，STM32的编译环境Keil 5 MDK-ARM

51单片机编译环境 Keil C51 简介：Keil C51是Keil Software公司（现已被ARM收购）专门为8051微控制器家族开发的编译器，它将标准C语言与8051单片机硬件特性相结合，让开发者能够用C语言高效地开发51单片机应用程序。特点 …...

编程日记 2025/8/17 1:35:50

Python内置函数---all（）

Python内置函数 all() 用于判断可迭代对象中的所有元素是否都为真值（Truthy），是逻辑判断的重要工具。 1. 基本语法 all(iterable) 参数： iterable 必须为可迭代对象（如列表、元组、集合、字典的值等）。…...

编程日记 2025/8/17 20:50:51

Windows系统安装RustDesk Server的详细步骤和客户端设置

Windows系统安装RustDesk Server的详细步骤在Windows系统上安装RustDesk Server涉及几个关键步骤，包括安装必要的依赖、下载RustDesk Server程序、配置并启动服务。以下是详细的步骤： 1. 安装Node.js和PM2 RustDesk Server的某些版本可能需要Node.js环境来运行，而PM2是一…...

编程日记 2025/8/17 18:18:31

路由过滤实验

实验拓扑以及要求此实验总结 1.ip-prefix 拒绝192.168.4.1 32,这样写的话并不会匹配192.168.4.1 32,需要加上范围less-eq 32,也就是说,192.168.4.1 32只是规则的范围,匹配还是得写范围 2.router-policy适合用在边界路由器引入 filter-policy都可以用配置IP 配置ospf,rip …...

编程日记 2025/8/17 20:39:05

数据结构学习笔记：栈、队列与表达式转换详解

目录栈（Stack） 1.1 顺序存储实现 1.2 链式存储实现队列（Queue） 2.1 顺序存储实现 2.2 链式存储实现中缀表达式转后缀表达式后缀表达式计算总结与应用场景一、栈（Stack） 栈是一种**后进先出（…...

编程日记 2025/8/17 18:18:32

项目优化中ini配置文件解析器

一、项目背景在停车管理项目中不同道闸口的终端配置可能不同，如靠近居民楼的道闸终端LED的语音播报音量和靠近马路的道闸门口不同；不同终端道闸锁闸时间也可能不同，诸如此类放在数据库中，不同的终端在启动时必须先连接到数据库才…...

编程日记 2025/8/17 20:25:10

【FPGA】【DE2-115】DDS信号发生器设计

目录一、基本概述 1.1 DDS简介 1.2 DDS工作原理 1.2.1 核心组成部分 1.2.2 工作流程 1.2.3 输出频率计算 1.3 常见的RAM、ROM、FIFO等IP核的参数设置和调用过程 1.3.1 RAM IP核的参数设置和调用过程 1.3.2 ROM IP核的参数设置和调用过程 1.3.3 FIFO IP核的参数设置和…...

编程日记 2025/8/17 20:45:27

使用 OpenRewrite 简化 Java 和 SpringBoot 迁移

大家好，这里是架构资源栈！点击上方关注，添加“星标”，一起学习大厂前沿架构！ 移民的挑战随着 Spring Boot 2.x 等旧版本即将到期且不再获得支持，迁移到较新版本对于安全性、兼容性和性能改进至关重要。但…...

编程日记 2025/8/17 21:41:15

电脑怎么设置锁屏密码分享详细设置教程

电脑不仅仅是工作的工具，更是存储着大量个人信息和重要数据的私人空间。设置电脑锁屏密码是保护这些信息，免受未经授权访问的基本安全措施之一。那么，电脑怎么锁屏密码呢？下面便为大家介绍在一些不同操作系统中怎么设置电脑锁屏密…...

编程日记 2025/8/17 21:02:49

【Netty篇】Handler Pipeline 详解

目录一、 Handler & Pipeline——流水线上的“特种部队”与“生产线”1、 ChannelHandler —— 流水线上的“特种兵”👮‍♂️2、 ChannelPipeline —— 生产线上的“接力赛跑”🏃‍♀️🏃‍♂️ 二、代码实例1、服务端代码示例2、客…...

编程日记 2025/8/17 18:18:33

Postman实现接口测试（附项目实战）

Postman实现接口测试（附项目实战） Postman实现接口测试掌握如何安装Postman 掌握Postman的基本用法掌握全局变量与环境变量掌握Postman断言和关联掌握如何读取外部文件实现参数化掌握如何使用Newman生成HTML测试报告 1.Postman介绍和安装 Postman是…...

编程日记 2025/8/17 22:58:05

从零上手GUI Guider学习LVGL——Button

视频教程请关注我b站：同学_好好学习，这里只是做相应的笔记文稿从零上手GUI Guider学习LVGL——Buttton 前言： 首先我们为什么要学习LVGL设计工具呢？ 1 降低开发难度 2 提高开发效率所以我们需要学习一款合适的设计工具在b站很少…...

编程日记 2025/8/17 21:37:15

软件工程知识体系全面梳理

一、软件工程概述 1. 软件工程基本概念定义：应用系统化、规范化、可量化的方法开发、运行和维护软件的学科目标：提高软件质量、降低开发成本、控制开发周期三要素：方法、工具、过程 2. 软件生命周期可行性分析 → 需求分析 → 设计 …...

编程日记 2025/8/17 1:45:25

操作教程｜通过DataEase制作MaxKB系统数据大屏

MaxKB（Max Knowledge Brain）是一款强大易用的企业级AI助手，支持RAG检索增强生成、工作流编排、MCP工具调用能力，目前正在被广泛应用于智能客服、企业内部知识库、学术研究与教育等场景。MaxKB可以帮助用户快速搭建面向不同应用场景…...

编程日记 2025/8/17 21:40:48

关于webpack的知识点

一、什么是webpack?它的核心概念是什么？ webpack是现代JavaScript应用程序的打包工具它的核心概念包括： 入口输出loaderplugin(插件)模式模块依赖图二、webPack与Grunt\Grulp有什么区别？ 首先Grunt/Gulp是任务运行器，用来实现流…...

编程日记 2025/8/17 18:18:29

Linux系统中的 sudo 权限会导致环境变量失效。

标题为什么 sudo 会破坏配置的环境变量？ 权限切换：sudo 以 root 用户身份执行命令，root 用户的环境变量和当前用户（user）的环境变量是隔离的。环境变量丢失：nvm 依赖的 PATH、等环境变量是通过用户 She…...

编程日记 2025/8/17 20:10:26

目标分割模型优化自身参数都是梯度下降算法吗？

在计算机视觉的深度学习任务中，诸如 CNN、FCN、U-Net、DeepLab 系列模型已成为图像分类与图像分割任务的核心架构。它们在网络结构和任务上有所差异，但是否共享同一种优化机制？是否都使用梯度下降？优化过程中又有什么本质区别&…...

编程日记 2025/8/17 19:54:54

前端请求传参与后端匹配的接收方式Content-Type类型

文章目录一、Content-Type简介二、Content-Type类型三、常⽤类型3.1. application/json：JSON数据格式3.2. application/x-www-form-urlencoded：普通表单格式（键值对）3.3. multipart/form-data：多部分表单格式&#xf…...

编程日记 2025/8/17 20:40:41

解决：VSCode C++ conan 安装第三方库后头文件报错

文章目录 1 头文件include路径查找报错参考 1 头文件include路径查找报错找到conan_toolchain.cmake中 INCLUDE_PATH list(PREPEND CMAKE_INCLUDE_PATH "/Users/hanliqiang/.conan2/p/b/fmte8c4f7a755477/p/include")生成C编译配置 CtrlShiftP 中选择C Edit Confi…...

编程日记 2025/8/17 18:20:05

（leetcode算法题）309. 买卖股票的最佳时机含冷冻期

按照题目要求，研究对象是最后一天结束后获得的最大利润那么就可以把问题拆分成第 1 天结束后获得的最大利润， 第 2 天结束后获得的最大利润， 第 i 天结束后获得的最大利润， 由于规则中强调不能同时参与多笔交易&#xff0c…...

编程日记 2025/8/17 21:05:39

相关文章：