Ant Design表格插入图片

首先看效果，大体效果如下：

首先引入组件库：

//引入connect 用于连接UI组件与redux
import { connect } from 'react-redux'
import React, { Component } from 'react'
import './index.css'
import { Button, Input, DatePicker, Tabs, Table } from 'antd';
import { ShoppingFilled, SearchOutlined, LoginOutlined, SettingFilled, DeleteFilled, DownSquareFilled } from '@ant-design/icons';
//引入axios
import axios from 'axios'

Ant Design有一个表格组件（Table），Table中column属性代表表格的表头信息，dataSource代表需要渲染的数据：

<Table scroll={{ y: 160 }} rowSelection={rowSelection} columns={columns} dataSource={this.state.showList} />

column信息需要写在组件外：

const columns = [{title: '商品信息',dataIndex: 'tupian',width: 130,render: (record) => <img src={record} alt="" width="100px" />},{title: '',dataIndex: 'xinxi',width: 300,},{title: '价格',dataIndex: 'jiage',},{title: '库存',dataIndex: 'kucun',},{title: '销量',dataIndex: 'xiaoliang',},{title: '标签',dataIndex: 'biaoqian',width: 110,},{title: '折扣力度',dataIndex: 'zhekou',width: 110,},{title: '操作',dataIndex: 'caozuo',key: 'x',render: () => <a>删除</a>,},
];

下面是需要渲染的数据处理：

state = {selectedRowKeys: [4], // Check here to configure the default columngoodsList: [],showList: [],};componentDidMount() {axios.get('http://localhost:8888/goods/list', {params: {current: 20}}).then(res => {this.setState({ goodsList: res.data })this.getShowList()console.log(this.state.goodsList);}, err => {console.log(err);})}getShowList() {let showList = this.state.goodsList.listshowList = showList.reduce((total, item, index, arr) => {total.push({key: item.goods_id,tupian: item.img_big_logo,xinxi: item.title,jiage: item.current_price,kucun: item.goods_number,xiaoliang: item.goods_number,biaoqian: item.category,zhekou: item.sale_type,})return total}, [])this.setState({ showList: showList })}

Ant Design表格插入图片相关推荐

【论文写作】利用word表格插入图片和公式，以及段落的段前段后间距设置
公式:段前段后各6磅图片和段落之间:12磅小标题:段前6磅,段后12磅图片标题:段前6磅,段后12磅表格标题:段前12磅,段后6磅图标(a)(b)-段前段后均为0 表格插入公式可以看出,表 ...
ant design表格添加loading效果
这里看一下ant design中表格添加loading效果. 在页面进来,获取数据时候获取到数据的时候实现方法: 这里只需要在要渲染的表格中添加,loading={XXXX} 即可.大括号里面的值 ...
ant 改变表格数据_React ant design表格导出数据为EXCEL表格数据
一.由于公司项目需要,需要将表格数据导出为EXCEL表格数据.环境React+Ant Design 二.安装插件js-export-excel yarn安装-记得以管理员身份执行 yarn add j ...
Ant Design 表格：循环展示表头，表头添加图标icon
需求背景: 用来统计房间里住户的信息实现效果: 实现过程: 表头:问题a,问题b,问题c,是从动态数据循环获取得到的,包括右侧的icon,和鼠标以上显示的效果:toolt ...
ant design 预览图片_Ant Design Pro上传图片
Ant Design Pro上传图片今天看了下Ant Design Pro上传图片的插件,感觉挺简单,也没有遇到太多问题,分享个大家!顺便记录下. 这里有个坑,主要文件命名的时候不要和保留关键词同名 ...
Qt--QTablewidgets 表格插入图片，且可以自动调整图片的大小
QTablewidget 调整表格图片大小 def set_qtableWidgets(self,filName_path,head_labels,width=100,height=100):self ...
vue+ iview Table表格插入图片显示不同状态
最近做的项目需求是表格里需要用图片提示下当前数据的状态选中的及是用的图片做的,红色的是gif图灰色的即是另外一种状态.实现方法: 主要是iview Table表格里的render函数处理的,上可视 ...
【C#】C#使用Microsoft.Office.Interop.Word操作Word文档，向表格插入图片
上篇:[C#]C#使用Microsoft.Office.Interop.Word操作Word文档,替换文本 Word模板: 代码: try {Application app = new Applica ...
elementui 表格插入图片并且鼠标移入放大
先来看下效果图如果需要移入图片放大则可使用el-popover悬浮效果 <el-table-columnalign="center"label="模板封面&quo ...
ant design 预览图片_AntD框架的upload组件上传图片时遇到的一些坑
前言本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 前端做文件上传这个功能,是很有技术难度的.既然框架给我们提供好了,那就直接用呗.结果用的时 ...

Ant Design表格插入图片

Ant Design表格插入图片相关推荐

最新文章

热门文章