效果:

代码:

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. java 实用Util汇总

    1.Util介绍 Util是工具的意思,一般来说,常常用来描述和业务逻辑没有关系的数据处理. Util一般要和私有方法对比:私有方法一般来说是只是在特地场景下使用的,私有方法越多,代码结构越乱.常见的 ...

  2. HDU 4508 湫湫系列故事——减肥记I

    原题链接:点击此处 解题思路: 思路与01背包差不多,思路用二维数组表示: dp[i][v]=max{dp[i-1][v-k*b[i]]+k*a[i]|0<=k*b[i]<=v} 其dp( ...

  3. Fleury算法

    关于为什么不选桥 因为选桥之后会变成两个联通分支,这时由于可能产生的新联通分支不是孤立顶点,他俩都不联通了,那么也就绝对不可能“一笔画”走下来了 关于为什么可以选除桥之外的任意一条边走 本质原因是因为 ...

  4. springboot自定义jmx对象

    在使用springboot-admin对springboot项目进行监控的时候我们发现其是具有web访问jmx对象的功能的,那它内部是怎么实现的呢. Jolokia是一个JMX-http桥梁,它提供了 ...

  5. SpringMVC之RequestMappingHandlerMapping

    <mvc:annotation-driven content-negotiation-manager="" enable-matrix-variables="tru ...

  6. Mac下Go2Shell配合ITerm2无法定位到当前文件夹目录的解决方法

    下载最新版,这个问题在最新版已经完美解决. http://zipzapmac.com/go2shell

  7. python描述符学习

    目录 一.对象属性的访问控制 二.描述符基本理解 三.基本使用 四.使用描述符完成property.classmethod.staticmethod自定义实现 1.property的自定义实现 2.c ...

  8. 删除eclipse无效的工作空间路径

    eclipse会记录我们使用过的工作空间的路径,方便下面使用.也可以根据自己的需要删除无用的工作空间路径.

  9. JavaScript设计模式-6.封装

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. python四种简单排序

    #!/usr/bin/python #排序方法 #冒泡排序 def buble(l): for i in range(len(l)): for j in range(len(l)-i-1): if l ...