效果:

代码:

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. PHP中引入文件的四种方式详解

    四种语句 PHP中有四个加载文件的语句:include.require.include_once.require_once. 基本语法 require:require函数一般放在PHP脚本的最前面,P ...

  2. MyBatisSystemException->BindingException: Parameter 'xxx' not found. Available parameters are [arg1, arg0, param1, param2]

    最近在使用Spring boot+mybatis做新的基础框架,结果碰到如下问题: 1 org.mybatis.spring.MyBatisSystemException: nested except ...

  3. 配置bootstrap环境

    bootstrap是一个优雅,灵活,可扩展的前端工具集,可搭建WEB页面的HTML,CSS,JavaScript工具集,最重要的是它的栅格系统. 这里不做更多的详细介绍具体可参照官方网站:http:/ ...

  4. 【HNOI2019】部分题简要题解

    题意懒得写了 LOJ Day 1 T1 鱼 个人做法比较猎奇,如果有哪位大佬会证明能分享一下的话感激不尽. 题解:枚举鱼尾和鱼身的交点D,将所有其他点按照到D的距离排序,距离相同的分一组. 感性的理解 ...

  5. jackson构建复杂Map的序列化

    1.序列化复杂的Map时,可能需要下面的方式 import com.fasterxml.jackson.databind.JavaType; import com.fasterxml.jackson. ...

  6. ASP.NET MVC利用ActionLink实现动态组合查询

    一个文件传输数据表,内有日期.传输协议.传输方向(上传或下载).文件名等信息,完整的表内容显示如下: 现在需要分类查询,即按照协议和传输方向查询.单独的分类查询问题并不大,比如,按协议查询,在View ...

  7. Android多媒体之照相机

    1.调用系统的照相机 public void click(View view) { // 激活系统的照相机拍照 Intent intent = new Intent("android.med ...

  8. WPF通过<x:Array>直接为ListBox的ItemsSource赋值

    <!--其中sys前缀是在xmlns中引入了System的命名空间--> <ListBox.ItemsSource> <x:Array Type="{x:Typ ...

  9. ASP.NET Core 中的依赖注入

    目录 什么是依赖注入 ASP .NET Core 中使用依赖注入 注册 使用 释放 替换为其它的 Ioc 容器 参考 什么是依赖注入 软件设计原则中有一个依赖倒置原则(DIP),为了更好的解耦,讲究要 ...

  10. SAML 2.0 Profiles--wiki

    http://en.wikipedia.org/wiki/SAML_2.0#Web_Browser_SSO_Profile In SAML 2.0, as in SAML 1.1, the prima ...