<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;} 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/681410.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MacOS - M1芯片 Mac 在“恢复”模式中启用系统扩展教程

部分软件需要开启系统扩展才能正常使用&#xff0c;但是默然M1芯片的Mac不能直接打开系统扩展&#xff0c;如下两图。 若要启用系统扩展&#xff0c;您需要在“恢复”环境中修改安全性设置。 若要执行此操作&#xff0c;请将系统关机&#xff0c;然后按住触控ID或电源按钮以开…

MATLAB 1:基础知识

MATLAB中的数据类型主要包括数值类型、逻辑类型、字符串、函数句柄、结构体和单元数组类型。这六种基本的数据类型都是按照数组形式存储和操作的。 MATLAB中还有两种用于高级交叉编程的数据类型&#xff0c;分别是用户自定义的面向对象的用户类类型和Java类类型。 1.1.1数值类…

Stable Diffusion 模型下载:majicMIX reverie 麦橘梦幻

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十

二级 C 语言笔试-12

一、选择题 1. 软件是指 A) 程序 B) 程序和文档 C) 算法加数据结构 D) 程序、数据与相关文档的完整集合 2. 下面不属于软件设计原则的是 A) 抽象 B) 模块化 C) 白底向上 D) 信息隐蔽 3. 树是结点的集合&#xff0c;它的根结点的数目是( )。 A) 有且只有 1 个 B) 1 或多于 1 C) …

洛谷: P9749 [CSP-J 2023] 公路

思路: 贪心思想指的是在对问题求解的时候&#xff0c;总是能做出在当前看来是最好的选择,也就是说&#xff0c;如果要得到整个问题的最优答案&#xff0c;那么要求每一步都能做出最好的选择&#xff08;feihua&#xff09;。 在这道题里面&#xff0c;我们希望在来到第i站的时…

Windows搭建docker+k8s

安装Docker Desktop 从官网下载&#xff0c;然后直接安装即可&#xff0c;过程很简单&#xff0c;一直Next就行。 有一点需要注意就是要看好对应的版本&#xff0c;因为后边涉及到版本的问题。 https://www.docker.com/products/docker-desktop 安装完成&#xff0c;双击图…

Python列表clear()方法详解与实例

Python列表clear()方法详解与实例 &#x1f335;文章目录&#x1f335; &#x1f333;引言&#x1f333;&#x1f333;clear()&#x1f333;&#x1f340;功能介绍&#x1f340;&#x1f340;语法&#x1f340;&#x1f340;示例&#x1f340;&#x1f340;注意事项&#x1f34…

go面试题--使用两个goroutine交替打印数字与字母

使用两个goroutine交替打印数字与字母 题目如下&#xff1a; 使用两个goroutine交替打印序列&#xff0c;一个goroutine打印数字&#xff0c;另外一个goroutine打印字母&#xff0c;最终效果如下&#xff1a; 12AB34CD56EF78GH910IZ1112KL1314MN1516OP1718QR1920ST2122UV2324W…

【白话前端】快速区分webGL,webGPU,unity3D和UE4

在3D图形渲染的渲染领域&#xff0c;很多友友们对上述概念傻傻分不清&#xff0c;站在前端开发角度&#xff0c;我用简单语言说下&#xff0c;结论在文章最后。 一、四者都能进行3D图形渲染 它们之间有一些区别&#xff0c;下面我将对它们进行简单的区分&#xff1a; WebGPU&a…

探索设计模式的魅力:捕捉变化的风-用观察者模式提升用户体验

设计模式专栏&#xff1a;http://t.csdnimg.cn/U54zu 目录 一、引言 核心概念 应用场景 可以解决的问题 二、场景案例 2.1 不用设计模式实现 2.2 存在问题 2.3 使用设计模式实现 2.4 成功克服 三、工作原理 3.1 结构图和说明 3.2 工作原理详解 3.3 实现步骤 四、 优…

TCP 和 UDP的区别

文章目录 概述区别UDPTCPTCP与UDP的选择UDP和TCP编程区别 概述 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;和 UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;是互联网中两种最常用的传输层协议 总的来…

C++笔记:容器适配器:优先级队列(priority_queue)模拟实现

文章目录 框架(constructor)size()、empty()、top()push()声明参数实现代码 pop()声明实现代码 仿函数与函数指针仿函数的定义仿函数实现回调函数指针实现回调adjust_up 和 adjust_down 的改进 完整代码 容器适配器&#xff08;Container Adapter&#xff09;是一种 C 中的抽象…

【每日一题】牛客网——链表的回文结构

✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f64f;小杨水平有限&#xff0c;欢迎各位大佬指点&#xff0c;相互学习…

Leetcode 718 最长重复子数组

题意理解&#xff1a; 给两个整数数组 nums1 和 nums2 &#xff0c;返回 两个数组中 公共的 、长度最长的子数组的长度 。 如&#xff1a; nums1 [1,2,3,2,1], nums2 [3,2,1,4,7] 则最长重复子序列为&#xff1a; 321 长度为3 这里采用动态规划解决这个问题。最长公共子序…

centos7更新yum安装docker-ce使用阿里源

centos7更新yum安装docker-ce使用阿里源 centos7更新yum安装docker-ce使用阿里源240209版 #!/bin/bash ## 卸载之前的docke sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \dock…

OpenCV-38 图像金字塔

目录 一、图像金字塔 1. 高斯金字塔 2. 拉普拉斯金字塔 一、图像金字塔 图像金字塔是图像中多尺度表达的一种&#xff0c;最主要用于图像的分割&#xff0c;是一种以多分辨率来解释图像的有效但概念简单的结构。简单来说&#xff0c;图像金字塔是同一图像不同分辨率的子图…

2000-2021年县域指标统计数据库

2000-2021年县域统计数据库 1、时间&#xff1a;2000-2021年 2、来源&#xff1a;县域统计年鉴 3、范围&#xff1a;2500县 5、指标&#xff1a; 地区名称、年份、行政区域代码、所属城市、所属省份、行政区域土地面积平方公里、乡及镇个数个、乡个数个、镇个数个、街道办…

2024.2.6 模拟实现 RabbitMQ —— 数据库操作

目录 引言 选择数据库 环境配置 设计数据库表 实现流程 封装数据库操作 针对 DataBaseManager 单元测试 引言 硬盘保存分为两个部分 数据库&#xff1a;交换机&#xff08;Exchange&#xff09;、队列&#xff08;Queue&#xff09;、绑定&#xff08;Binding&#xff0…

调用讯飞火星AI大模型WebAPI

调用讯飞火星AI大模型 记录一次调用讯飞AI大模型的过程 官方文档 首先&#xff0c;去官网申请资格&#xff0c;获得必要秘钥等 再编写url&#xff0c;该url存在编码要求&#xff0c;具体看官网url编写 具体代码如下&#xff1a; getWebsocketUrl() {return new Promise((resol…

vivado仿真时使用的代码与实际不一致的解决办法

前言 在使用仿真软件时经常会遇到实际需要时间较长&#xff0c;而仿真需要改写实际代码运行时间的问题&#xff0c;在vivado软件中找到了解决办法 代码部分 这里使用一个最简单的例子来说明一下&#xff0c;学过FPGA的朋友肯定可以看出来就是一个简单的计数器使LED每500ms交…