使用antd中Table组件某一列有多个变量值需要写入

最新推荐文章于 2024-05-24 21:42:59 发布

小小的糖人

最新推荐文章于 2024-05-24 21:42:59 发布

阅读量2k

点赞数 1

分类专栏：其它文章标签： html reactjs 前端

本文链接：https://blog.youkuaiyun.com/zzyaiaad/article/details/108148588

版权

在antd的Table组件中，通常一列对应一个变量。然而，当需要在一列显示多个变量值时，不能单纯依赖dataIndex。解决办法是在columns中定义特殊的列结构，并在dataSource中为这些结构赋值。通过这种方式，可以成功展示多变量值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用antd的Table组件一般来说，都是一列一个变量，我们在coclums中定义dataIndex作为该列的ID，在dataSource对该ID进行赋值即可。
但是，当某一列需要有多个变量值写入时，我们就不可以再用dataIndex来定义一个ID。具体解决方案如下所示：

1.在columns中如下定义：

columns:[{
   
                title: '所属战区',
                render: (text, record) => (
                    <span>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小小的糖人

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

图书管理系统(https://github.com/plusmultiply0/bookmanagesystem)

m0_57057282的博客

06-03

784

特意去github找了一个用flask框架的项目，一起来学习它吧哇！真的是一个宝藏项目，一定要吃透它我打算先前端，再后端。

基于Antd Table自定义通用columns列筛选配置

小陈的博客

11-05

1593

最近因为工作需要，用到了富文本编辑器让用户填写反馈，上传图片等功能，经过一些对比选择了tinymce,记录下图片相关问题。完整版封装的组件代码，放到最后。环境这里由于开发环境是vue2,所以目前这个时间点，需要选择版本的去安装，引用官方文档的一句话这个比较简单，在_init的配置中，配置images_upload_handler_ 图片粘贴刚开始是想到的直接监听的事件，去获取剪切板的图片，代码如下：后来发现不生效，检查一下元素得知，tinymce是通过使用的，后来找到了配置项，返回的实例可以监听粘贴事件

参与评论您还未登录，请先登录后发表或查看评论

Ant Design 组件table同一列写多个参数

caoyan0829的博客

02-18

6193

效果图：代码： columns = [ { { title: <div className={styles.tableTeCenter}>投放地区</div>, dataIndex: 'areaNames', render: val => <div className={styles.tableCenter}>...

ant design vue中的Table组件一列显示多个参数

hxm2017jy的博客

01-21

4704

项目中，有时会遇到表格显示的字段较多，全部显示出来页面过长需要滚动查看，用户体验不好，就需要将一些字段归类到一个单元格显示，这时就需要一列显示多个参数了,直接上代码 <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="fal

ant-table自定义表格，表头和表格拆分，自定义点击事件，扁平化数据处理拆分（vue2）

m0_73008551的博客

08-10

1554

ant-table自定义表格单元格拆分自定义单元格单元格自定义点击事件

如何在ant design vue table 表格当中一格放入多个参数字段

w161513820的博客

09-13

5994

效果如图有时候会遇到一个格子里面需要放入多个字段的情况并且还要判断类型不同显示的内容不同的情况，代码如下： <span slot="actions" slot-scope="text" class="table-btn-box"> <template id="payTypes"> <ul> <li v-show="text.payType == '银行卡'">持卡人姓名 : {{text.car

前端知识宝典

qq_37759901的博客

01-29

1408

搜索框输入，文本剪辑器实时保存代码实现思路如下：（利用定时器，每次触发先清掉以前的定时器，从新开始）

React,Vue,Css3 ...等热门面试题

qq_70010470的博客

05-24

818

## 面试 * Fiber React Fiber是react执行渲染时的一种新的调度策略 JavaScript是单线程的一旦组件开始更新主线程就一直被React控制这个时候如果再次执行交互操作就会卡顿页面首次渲染会创建一颗结构一模一样的的Fiber节点树 Fiber在update的时候会从原来的Fiber clone出一个新的Fiber 俩个Fiber diff出的变化在更新结束后会取代之前的 Fiber节点树渲染过程采用切片的方式

【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践

xxxzzzqqq_的博客

03-15

2848

预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

antd-table同一行内容不同列数据进行大小对比

AllenMa的博客

12-06

538

antd-table同一行内容不同列数据进行大小对比

React之antdesign官网虚拟列表（Table组件）二次封装

仙途路漫漫其修远兮

09-22

5842

添加功能有：（1）全选与单选功能（2）滚动加载功能（虚拟列表级滚动加载）（3）定位某一行（4）表格字体闪烁功能（5）可对表头进行隐藏或显示配置，表格内部内容进行宽度适配（6）高度设置（这块可能得靠你自己再去深度研究一下这块了）

antd Vue table 实现一列展示多个字段

逆风优雅的博客

03-29

1740

建设起止年限，使用两个字段进行拼接。

Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选

XIAOYAN_v587的博客

07-29

2101

Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选，涉及到onFilter和change函数

antd 表格设置动态列（动态表头）

最新发布

10-16

在 Ant Design 的 Table 中，如果你想让某一列的复选框（Checkbox）只允许用户选择一项而不是多选，可以通过以下步骤实现： 1. 确保已经安装了 Ant Design： ```bash npm install antd ``` 2. 在列配置（columns）中，修改该列的 `render` 函数。添加一个额外的 state 来跟踪当前被选中的项，比如 `selectedRowKeys` 和 `onCheckboxChange` 函数，它会在每次 checkbox 的状态改变时触发： ```jsx import { Table, Checkbox } from 'antd'; // 假设你的 data 已经准备好了 const columns = [ // 其他列... { title: '操作', dataIndex: 'action', render: (text, record) => ( <Checkbox defaultChecked={selectedRowKeys.includes(record.key)} onChange={() => this.handleCheckboxChange(record.key)} /> ), }, ]; // 添加状态变量和处理函数 state = { selectedRowKeys: [], // 初始化为空数组，表示无选中项 }; // 处理 checkbox 改变事件 handleCheckboxChange = (key) => { // 检查当前是否有其他项被选中，如果有则取消它们的选择 if (selectedRowKeys.length > 0 && !selectedRowKeys.includes(key)) { const newSelectedKeys = selectedRowKeys.filter(key => key !== key); this.setState({ selectedRowKeys: newSelectedKeys }); } else { // 只有一个选项被选中，直接更新状态 this.setState({ selectedRowKeys: [key], }); } }; // 当从 Table 获取数据时，将新选中的项设置到 state componentDidMount() { // 如果有默认选中项，设置到 state // 这部分取决于你的实际数据结构和如何传递默认值 } render() { // 将 selectedRowKeys 传递给 Table 组件的 rowSelection 属性 return ( <Table rowKey="key" rowSelection={{ onChange: this.handleSelectChange, selectedRowKeys, }} columns={columns} // 其他 Table 属性... /> ); } ``` 通过这种方式，当用户尝试再次选择已被选中的复选框时，之前的选中项会被取消。记得根据你的数据结构和需求适当地初始化 `selectedRowKeys`。如果你还有其他列也使用了复选框，也要确保它们的行为与这一列一致。