效果:

代码:

import React from 'react';
import { Table } from 'antd';
import DatePicker1 from './DatePicker';
const pieArrs = [
{place_id: 3},
{place_id: 3},
{place_id: 3},
{place_id: 3},
{place_id: 3},
{place_id: 3},
{place_id: 3},
{place_id: 3},
{place_id: 3}]
const columns = [
{
title: 'Address',
dataIndex: 'address',
}];
const data = [];
{pieArrs.map((pieArr,index)=>
data.push({
key: index,
address: <DatePicker1 />,
})
)}
class ScrollTable extends React.Component {
render() {
return (
<div>
<Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />,
</div>
)
}
}
export default ScrollTable
 

React+antd 在限制高度内实现滚动显示多个组件(show scrolled components in a limited height with react antd)的更多相关文章

  1. iOS UIWebView 获取内容实际高度,关闭滚动效果

    本文转载至 http://my.oschina.net/Khiyuan/blog/341535   iOS UIWebView 获取内容实际高度,关闭滚动效果 近期做东西,将 UIWebView 嵌套 ...

  2. HTML+CSS实现大盒子在小盒子的展示范围内进行滚动展示

    HTML+CSS实现大盒子在小盒子的展示范围内进行滚动展示 1.效果展示: 2.主要代码:样式: overflow:auto; 3.如果想要消除对应的滚动条: .out::-webkit-scroll ...

  3. 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。

    react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...

  4. ListView的自动循环滚动显示

    最近项目里需要做评价内容的循环滚动显示,一开始想到的就是定时器.后来查了资料才知道ListView里面有个函数smoothScrollToPosition(position),瞬间觉得简单了很多.首先 ...

  5. JS滚动显示

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  6. css如何实现一个元素高度固定宽度按比例显示?

    用padding-top百分比可以实现宽度固定高度按比例展示,现在的需求是对一个video视频的盒子div高度是固定的,宽度如何按比例展示? 解决后效果如图: 红框标注的即是我在上面高度比例固定的范围 ...

  7. scrollreveal(页面滚动显示动画插件支持手机)

    scrollreveal.js是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件.该插件通过配置可以在页面滚动,元素进入视口时产生炫酷的动画效果,同时还支持元素的3D效果,非常的实用. ...

  8. HTML让字体闪动和滚动显示

    存粹的HTML让字体闪动显示: <html> <head> <title>TEST</title> <style type="text/ ...

  9. Jquery控制滚动显示欢迎字幕v2

    Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...

随机推荐

  1. leetcode-78-子集(用bfs解决)

    题目描述: 给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: nums = [1,2,3] 输出: [ [3],   [1] ...

  2. 架构师养成记--35.redis集群搭建

    前记:redis哨兵经验之谈.哨兵做主从切换可能要花费一两秒,这一两秒可能会丢失很多数据.解决方法之一是在java代码中做控制,try catch 到 链接断开的异常就sleep 一两秒钟再conti ...

  3. Docker安装MongoDb

    1.下载镜像 docker pull mongo 2.运行mongo docker run --name mongo -v /data/mongodb:/data/db -p : -d mongo - ...

  4. css左右布局,左侧固定,右侧自适应

    实现布局的几种方法,见代码: <!DOCTYPE html> <html lang="cn"> <head> <meta charset= ...

  5. Log中关于zVideoApp与zChatApp之间的消息传递可以搜索以下字符串

    [CSSBConfIPCAgent::OnMessageReceived]  (这是zVideoApp端的) 和 [CSSBPTIPCListener::OnMessageReceived]      ...

  6. 利用ReentrantLock简单实现一个阻塞队列

    借助juc里的ReentrantLock实现一个阻塞队列结构: package demo.concurrent.lock.queue; import java.util.concurrent.lock ...

  7. Web安全学习笔记——SQL注入

    一.MySQL注入 1. 常用信息查询 常用信息: 当前数据库名称:database() 当前用户:user() current_user() system_user() 当前数据库版本号:@@ver ...

  8. [性能测试]:ISO8583报文解析实例

    现在我们有ISO8583报文如下(十六进制表示法): 60 00 03 00 00 60 31 00 31 07 30 02 00 30 20 04 C0 20 C0 98 11 00 00 00 0 ...

  9. 连接Git@OSC操作步骤

    一.准备工作 软件下载 Git:地址 TortoiseGit:地址 二.安装与配置 1.Git安装 Git配置 设置客户端的用户名和email 然后,到Git@OSC 上面注册一个帐号. 这个帐号就是 ...

  10. CKEditor图片上传实现详细步骤(使用Struts 2)

    本人使用的CKEditor版本是3.6.3.CKEditor配置和部署我就不多说. CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传. ...