效果:

代码:

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. iOS学习笔记(6)——翻译苹果文档About Windows and Views

    About Windows and Views 关于窗口和视图 In iOS, you use windows and views to present your application’s cont ...

  2. 【Quartz】解密properties配置文件中的账号密码

    在配置quartz时,为了保密某些信息(特别是账号密码),通常会使用密文.那么在实际使用这些配置信息时,需要进行解密.本文提供一种解密方法如下: (1)假设在properties文件中加密了账号密码 ...

  3. python3.6的request

    request实例1: import requests payload = {'key1':'value','key2':'value2'} url = "http://httpbin.or ...

  4. SparkSQL中的自定义函数UDF

    在Spark中,也支持Hive中的自定义函数.自定义函数大致可以分为三种: UDF(User-Defined-Function),即最基本的自定义函数,类似to_char,to_date等 UDAF( ...

  5. Flask基本知识

    @app.route('/')def hello_world(): return 'Hello World!' #route动态Route,支持字符串.整数.浮点数,/user/<int:id& ...

  6. Android字符串及字符串资源的格式化

    为什么要写这一篇随笔呢?最近做项目的过程中,遇到很多页面在要显示文本时,有一部分是固定的文本,有一部分是动态获取的,并且格式各式各样.一开始采取比较笨的办法,把他拆分成一个个文本控件,然后对不同的控件 ...

  7. android studio2.3.3 模拟器 Jni函数调用C++对象,lldb调试this指针和相关变量显示无效的原因

    android studio2.3.3 的版本中 Jni函数调用C++对象,对象调用相关的成员函数, lldb调试,变量跟踪窗口,this指针和相关变量显示无效的原因,但这些参数实际是有效的,只是de ...

  8. linux 安装php bz2扩展

    折腾了半天,最大的坑就是我是用lnmp一键安装php环境,php7下面没有ext文件夹,有个include下面虽然有个ext 但是里面没有需要的bz2 也尝试去pecl  和 pear 上面去找  无 ...

  9. 深度学习(七)U-Net原理以及keras代码实现医学图像眼球血管分割

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9780786.html DRIVE数据集下载百度云链接:链接:https://pan.baidu ...

  10. WPF的Label默认的padding不为0

    1.如图: 要求让“Tools” 左对齐,代码中已设置:HorizontalContentAlignment="Left" <Label Foreground="W ...