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