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

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

html 复制代码
<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...

获取 中的哪一列的哪个属性:

html 复制代码
<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;
    } 
相关推荐
界面开发小八哥2 小时前
「Java EE开发指南」如何用MyEclipse创建一个WEB项目?(三)
java·ide·java-ee·myeclipse
idolyXyz2 小时前
[java: Cleaner]-一文述之
java
一碗谦谦粉2 小时前
Maven 依赖调解的两大原则
java·maven
netyeaxi3 小时前
Java:使用spring-boot + mybatis如何打印SQL日志?
java·spring·mybatis
收破烂的小熊猫~3 小时前
《Java修仙传:从凡胎到码帝》第四章:设计模式破万法
java·开发语言·设计模式
小七mod3 小时前
【MyBatis】MyBatis与Spring和Spring Boot整合原理
spring boot·spring·mybatis
猴哥源码3 小时前
基于Java+SpringBoot的动物领养平台
java·spring boot
老任与码3 小时前
Spring AI Alibaba(1)——基本使用
java·人工智能·后端·springaialibaba
小兵张健3 小时前
武汉拿下 23k offer 经历
java·面试·ai编程
FreeBuf_3 小时前
Apache组件遭大规模攻击:Tomcat与Camel高危RCE漏洞引发数千次利用尝试
java·tomcat·apache