当前位置: 首页 > 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;} 
http://www.lryc.cn/news/297988.html

相关文章:

  • [数学]高斯消元
  • 【Linux】gdb调试与make/makefile工具
  • 使用Arcgis裁剪
  • sheng的学习笔记-网络爬虫scrapy框架
  • Qt PCL学习(三):点云滤波
  • Ainx-V0.2-简单的连接封装与业务绑定
  • 《杨绛传:生活不易,保持优雅》读书摘录
  • ChatGPT在肾脏病学领域的专业准确性评估
  • Centos7.9安装SQLserver2017数据库
  • spring boot和spring cloud项目中配置文件application和bootstrap中的值与对应的配置类绑定处理
  • 每天一个数据分析题(一百五十四)
  • Django从入门到放弃
  • C++中类的6个默认成员函数【构造函数】 【析构函数】
  • 06-Java适配器模式 ( Adapter Pattern )
  • C# CAD交互界面-自定义面板集-添加快捷命令(五)
  • Spring boot集成各种数据源操作数据库
  • K8s环境下rook-v1.13.3部署Ceph-v18.2.1集群
  • 【JavaEE】传输层网络协议
  • 08-Java过滤器模式 ( Filter Pattern )
  • ChatGPT高效提问—prompt常见用法(续篇八)
  • 微软.NET6开发的C#特性——接口和属性
  • 容器基础知识:容器和虚拟化的区别
  • 【Linux】vim的基本操作与配置(下)
  • [office] 图文演示excel怎样给单元格添加下拉列表 #知识分享#经验分享
  • 【RT-DETR有效改进】利用SENetV2重构化网络结构 (ILSVRC冠军得主,全网独家首发)
  • 【Linux】学习-进程间通信
  • 45. C++ 字符指针和字符串
  • 如何制作一款3D FPS游戏
  • 人工智能|深度学习——使用多层级注意力机制和keras实现问题分类
  • C语言常见面试题:C语言中如何进行网页开发编程?