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

<s-table>、<a-table>接收后端数据

对于 中的 <template #bodyCell=“{ column, record }”> :

<s-tableref="table":columns="columns":data="loadData":alert="options.alert.show"bordered:row-key="(record) => record.id":tool-config="toolConfig":row-selection="options.rowSelection"
><template #operator class="table-operator"><a-space><xn-batch-delete:selectedRowKeys="selectedRowKeys"@batchDelete="deleteBatchUserOrder"/></a-space></template><template #bodyCell="{ column, record }">--------------------------------------------{{column.dataIndex}}--------------------------------------------{{record}}<!-- 操作列 --><template v-if="column.dataIndex === 'action'"><a-space><a @click="formRef.onOpen(record)" v-if="hasPerm('userOrderEdit')">编辑</a><a-divider type="vertical" v-if="hasPerm(['userOrderEdit', 'userOrderDelete'], 'and')" /><a-popconfirm :title="$t('user.popconfirmDeleteUser')" @confirm="deleteUserOrder(record)"><a-button type="link" danger size="small" v-if="hasPerm('userOrderDelete')">删除</a-button></a-popconfirm></a-space></template></template>
</s-table>
const columns = [{title: detail,dataIndex: 'detail'},{title: change,dataIndex: 'change'},{title: reason,dataIndex: 'reason'},]

结果是:每一行的每一列(即每一个单元格,除了action操作列,因为它是看情况定有没有)都是以下数据样式:

每行第一格:
-------------------------------------------- detail -------------------------------------------- { "id": "1737009774700765185", "userId": "1736567211313270786", "username": "xxx", "orderNo": "" }
每行第二格:
-------------------------------------------- change-------------------------------------------- { "id": "1737009774700765186", "userId": "1736567211313270787", "username": "xxxx", "orderNo": "" }
每行第三格:
-------------------------------------------- reason-------------------------------------------- { "id": "1737009774700765187", "userId": "1736567211313270788", "username": "xxxxx", "orderNo": "" }

如果将 {{column.dataIndex}} 改为 {{column}} ,则输出的不只是 dataIndex,还有 title,即 detail 改为:{ “title”: “detail”, “dataIndex”: “detail” } 。
column 为定义的列:
:columns=“columns”
const columns = [
{
title: 用户名,
dataIndex: ‘username’
},
]
并不是实体类中所有的属性名称,而是 columns 中定义的数据;
record 为集合中每一条数据,相当于一个实体类中所有的数据;
所以遍历 column 即遍历所有的列头;
遍历 record 就是遍历集合中的每条数据。
所以 columns 可以自定义,但是 record 是查询出来的数据,包括属性名,每一条记录eg:{ “id”: “1737009774700765185”, “userId”: “1736567211313270786”, “username”: “xxx” }

想要在antd中 中获得每一行的索引:
<template #bodyCell=“{column, record, index}”>,一直以来都是只使用<template #bodyCell=“{column, record}”>,column为列属性,record为每行数据记录,而index为每行索引,从0开始,想要获得直接使用ndex即可,不同行index值不同,0、1、2…
获取 中的哪一列的哪个属性:

<a-table :data-source="selectData" :columns="columns">
<template #bodyCell="{column, record, index}">
</template>
</a-table>
const columns = [{title: '名称',dataIndex: 'name',align: 'center',width: '60%'},{title: '场景',dataIndex: 'sceneSeries',align: 'center',width: '40%'}
] 
const formData = ref({})     
formData.value.sceneList = selectData.value
console.log(selectData.value[index].name)    // 第index行的name
console.log(selectData.value[index].sceneSeries)    // 第index行的sceneSeries

后台接收:

	private List<VideoSceneParam> sceneList;@Setter@Getterpublic class VideoSceneParam {private String name;private String sceneSeries;} 

相关文章:

<s-table>、<a-table>接收后端数据

对于 中的 <template #bodyCell“{ column, record }”> &#xff1a; <s-tableref"table":columns"columns":data"loadData":alert"options.alert.show"bordered:row-key"(record) > record.id":tool-config&…...

[数学]高斯消元

介绍 用处&#xff1a;求解线性方程组 加减消元法和代入消元法 这里引用了高斯消元解线性方程组----C实现_c用高斯消元法解线性方程组-CSDN博客 改成了自己常用的形式&#xff1a; int gauss() {int c, r; // column, rowfor (c 1, r 1; c < n; c ){int maxx r; //…...

【Linux】gdb调试与make/makefile工具

目录 导读 1. make/Makefile 1.1 引入 1.2 概念 1.3 语法规则 1.4 示例 2. Linux调试器-gdb 2.1 引入 2.2 概念 2.3 使用 导读 我们在上次讲了Linux编辑器gcc\g的使用&#xff0c;今天我们就来进一步的学习如何调试&#xff0c;以及makefile这个强大的工具。 1. mak…...

使用Arcgis裁剪

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、掩膜提取二、随意裁剪三、裁剪 前言 因为从网站下载的是全球气候数据&#xff0c;而我们需要截取成中国部分&#xff0c;需要用到Arcgis的裁剪工具 一、掩…...

sheng的学习笔记-网络爬虫scrapy框架

基础知识&#xff1a; scrapy介绍 何为框架&#xff0c;就相当于一个封装了很多功能的结构体&#xff0c;它帮我们把主要的结构给搭建好了&#xff0c;我们只需往骨架里添加内容就行。scrapy框架是一个为了爬取网站数据&#xff0c;提取数据的框架&#xff0c;我们熟知爬虫总…...

Qt PCL学习(三):点云滤波

注意事项 版本一览&#xff1a;Qt 5.15.2 PCL 1.12.1 VTK 9.1.0前置内容&#xff1a;Qt PCL学习&#xff08;一&#xff09;&#xff1a;环境搭建、Qt PCL学习&#xff08;二&#xff09;&#xff1a;点云读取与保存、PCL学习六&#xff1a;Filtering-滤波 0. 效果演示 1. vo…...

Ainx-V0.2-简单的连接封装与业务绑定

&#x1f4d5;作者简介&#xff1a; 过去日记&#xff0c;致力于Java、GoLang,Rust等多种编程语言&#xff0c;热爱技术&#xff0c;喜欢游戏的博主。 &#x1f4d7;本文收录于Ainx系列&#xff0c;大家有兴趣的可以看一看 &#x1f4d8;相关专栏Rust初阶教程、go语言基础系列…...

《杨绛传:生活不易,保持优雅》读书摘录

目录 书简介 作者成就 书中内容摘录 良好的家世背景&#xff0c;书香门第为求学打基础 求学相关 念大学 清华研究生 自费英国留学 法国留学自学文学 战乱时期回国 当校长 当小学老师 创造话剧 支持钱锺书写《围城》 出任震旦女子文理学院的教授 接受清华大学的…...

ChatGPT在肾脏病学领域的专业准确性评估

ChatGPT在肾脏病学领域的专业表现评估 随着人工智能技术的飞速发展&#xff0c;ChatGPT作为一个先进的机器学习模型&#xff0c;在多个领域显示出了其对话和信息处理能力的潜力。近期发表在《美国肾脏病学会临床杂志》&#xff08;影响因子&#xff1a;9.8&#xff09;上的一项…...

Centos7.9安装SQLserver2017数据库

Centos7.9安装SQLserver2017数据库 一、安装前准备 挂载系统盘 安装依赖 yum install libatomic* -y 二、yum方式安装 # 配置 yum 源 wget -O /etc/yum.repos.d/mssql-server.repo https://packages.microsoft.com/config/rhel/7/mssql-server-2017.repoyum clean all yum…...

spring boot和spring cloud项目中配置文件application和bootstrap中的值与对应的配置类绑定处理

在前面的文章基础上 https://blog.csdn.net/zlpzlpzyd/article/details/136065211 加载完文件转换为 Environment 中对应的值之后&#xff0c;接下来需要将对应的值与对应的配置类进行绑定&#xff0c;方便对应的组件取值处理接下来的操作。 对应的配置值与配置类绑定通过 Con…...

每天一个数据分析题(一百五十四)

给定下面的Python代码片段&#xff0c;哪个选项正确描述了代码可能存在的问题&#xff1f; from scipy import stats 返回异常值的索引 z stats.zscore(data_raw[‘Age’]) z_outlier (z > 3) | (z < -3) z_outlier.tolist().index(1) A. 代码将返回数据集Age列中第…...

Django从入门到放弃

Django从入门到放弃 Django最初被设计用于具有快速开发需求的新闻类站点&#xff0c;目的是实现简单快捷的网站开发。 安装Django 使用anaconda创建环境 conda create -n django_env python3.10 conda activate django_env使用pip安装django python -m pip install Django查…...

C++中类的6个默认成员函数【构造函数】 【析构函数】

文章目录 前言构造函数构造函数的概念构造函数的特性 析构函数 前言 在学习C我们必须要掌握的6个默认成员函数&#xff0c;接下来本文讲解2个默认成员函数 构造函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c…...

06-Java适配器模式 ( Adapter Pattern )

原型模式 摘要实现范例 适配器模式&#xff08;Adapter Pattern&#xff09;是作为两个不兼容的接口之间的桥梁 适配器模式涉及到一个单一的类&#xff0c;该类负责加入独立的或不兼容的接口功能 举个真实的例子&#xff0c;读卡器是作为内存卡和笔记本之间的适配器。您将内…...

C# CAD交互界面-自定义面板集-添加快捷命令(五)

运行环境 vs2022 c# cad2016 调试成功 一、引用 using Autodesk.AutoCAD.ApplicationServices; using Autodesk.AutoCAD.Runtime; using Autodesk.AutoCAD.Windows; using System; using System.Drawing; using System.Windows.Forms; 二、代码说明 [CommandMethod("Cre…...

Spring boot集成各种数据源操作数据库

一、最基础的数据源方式 1.导入maven依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency <dependency><groupId>com.mysql</groupId><art…...

K8s环境下rook-v1.13.3部署Ceph-v18.2.1集群

文章目录 1.K8s环境搭建2.Ceph集群部署2.1 部署Rook Operator2.2 镜像准备2.3 配置节点角色2.4 部署operator2.5 部署Ceph集群2.6 强制删除命名空间2.7 验证集群 3.Ceph界面 1.K8s环境搭建 参考&#xff1a;CentOS7搭建k8s-v1.28.6集群详情&#xff0c;把K8s集群完成搭建&…...

【JavaEE】传输层网络协议

传输层网络协议 1. UDP协议 1.1 特点 面向数据报&#xff08;DatagramSocket&#xff09;数据报大小限制为64k全双工不可靠传输有接收缓冲区&#xff0c;无发送缓冲区 UDP的特点&#xff0c;我理解起来就是工人组成的**“人工传送带”**&#xff1a; 面向数据报&#xff08;…...

08-Java过滤器模式 ( Filter Pattern )

Java过滤器模式 实现范例 过滤器模式&#xff08;Filter Pattern&#xff09;或允许开发人员使用不同的标准来过滤一组对象&#xff0c;通过逻辑运算以解耦的方式把它们连接起来 过滤器模式&#xff08;Filter Pattern&#xff09; 又称 标准模式&#xff08;Criteria Pattern…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...