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

news/2024/7/23 11:29:54 标签: java, spring boot, vue, anti-design-vue

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

<s-table
	ref="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>
javascript">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>
javascript">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

后台接收:

java">	private List<VideoSceneParam> sceneList;
    @Setter
    @Getter
    public class VideoSceneParam {
        private String name;
        private String sceneSeries;
    } 

http://www.niftyadmin.cn/n/5374407.html

相关文章

AI 消灭软件工程师?| 新程序员

【导读】“AI 是否会取代软件工程师”是自大模型爆火以来程序员们最为关心的一大话题&#xff0c;事关编程的未来与我们每一位程序员。本文作者 Babel CEO、多年的资深程序员张海龙深入技术本质&#xff0c;为我们进行了答疑解惑。 本文精选自《新程序员 007&#xff1a;大模型…

spring 入门 一

文章目录 Spring简介Spring的优势Spring的体系结构 Spring快速入门Spring程序开发步骤导入Spring开发的基本包坐标编写Dao接口和实现创建Spring核心配置文件在Spring配置文件中配置UserDaoImpl使用Spring的API获得Bean实例 Spring配置文件Bean标签基本配置Bean标签范围配置Bean…

【Linux学习】线程详解

目录 十八.多线程 18.1 线程与进程 18.2 内核视角看待创建线程与进程 18.3 线程优缺点总结 线程的优点&#xff1a; 线程的缺点&#xff1a; 线程的用途&#xff1a; 18.4 线程与进程的联系 十九.线程控制 19.1 POSIX线程库 19.2 线程创建 19.3 线程等待 19.4 线程终止 19.5 线…

Stable Diffusion 模型下载:Disney Pixar Cartoon Type B(迪士尼皮克斯动画片B类)

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

【激光SLAM】激光雷达数学模型和运动畸变去除

目录 概念介绍激光雷达传感器介绍测距原理三角测距飞行时间&#xff08;TOF) 激光雷达数学模型介绍光束模型&#xff08;beam model&#xff09;似然场模型&#xff08;likelihood model&#xff09; 运动畸变介绍 畸变去除纯估计方法&#xff08;ICP Variants)ICP方法VICP&…

【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】

文章目录: 1.清除默认样式 1.1清除内外边距1.2清除列表圆点(项目符号) 3.外边距问题-合并现象4.外边距问题–塌陷问题5.行内元素垂直内外边距6.圆角与盒子阴影 6.1圆角 6.2 盒子模型-阴影(拓展) 综合案例一 产品卡片 综合案例二 新闻列表 1.清除默认样式 在实际设计开发中,要…

网络连接受限或无连接怎么办?这里提供几个修复办法

本文介绍了如何完成疑难解答步骤,以解决在Windows 10、Windows 8和Windows 7中尝试在Windows计算机上设置或建立网络连接时可能遇到的连接问题错误。 可能错误提示 连接受限或无连接:连接具有有限的连接或无连接。你可能无法访问Internet或某些网络资源。 连接受限。 排除和解…

DS Wannabe之5-AM Project: DS 30day int prep day12

Q1. Where is the confusion matrix used? Which module would you use to show it? 混淆矩阵 混淆矩阵常用于评估分类模型的性能&#xff0c;特别是在二分类或多分类问题中。它展示了实际类别与模型预测类别之间的关系。在Python中&#xff0c;可以使用sklearn.metrics模块…