效果:

代码:

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. python学习,day3:函数式编程,递归和高阶函数

    # coding=utf-8 # Author: RyAn Bi def calc(n): #递归 print(n) if int(n/2) > 0: #设置条件,否则会循环999 次,报错, ...

  2. bzoj4361:isn(dp+容斥+树状数组)

    题面 darkbzoj 题解 \(g[i]\)表示长度为\(i\)的非降序列的个数 那么, \[ ans = \sum_{i=1}^{n}g[i]*(n-i)!-g[i+1]*(n-i-1)!*(i+ ...

  3. JavaScript设计模式(一)

    什么是设计模式呢? 就是指对于类似的问题,我们可以用大致相同的思想.方法去解决之,而这种通用的思想.方法就是设计模式.学习设计模式可以帮助我们在遇到问题时迅速地搜索出一种清晰的思路来实现之. 第一部分 ...

  4. javascript006_Object_模拟java的Map

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  5. Types方法之isCastable-isConvertible

    5. Conversions and Promotions 5.1. Kinds of Conversion 5.1.1. Identity Conversion 5.1.2. Widening Pr ...

  6. JavaScript设计模式-7.单例模式

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

  7. Hive初始

    一.Hive概念 二.为什么要是用Hive 三.Hive优缺点 四.hive架构 一.Hive概念 Hive最初是应Facebook每天产生的海量新兴社会网络数据进行管理和机器学习的需求而产生和发展的 ...

  8. C#中的方法(函数),委托和事件

    1. 先有方法,然后再有委托,最后再有事件 2. 思考能不能将 A方法 作为参数,传递给 B方法呢? eg: 在传统的编程方式中,A方法 调用 B方法的方式如下: //洗菜 public void W ...

  9. Maven项目中Spring整合Mybatis

    Maven项目中Spring整合Mybatis 添加jar包依赖 spring需要的jar包依赖 <dependency> <groupId>org.springframewo ...

  10. session_start()导致history.go(-1)返回时无法保存表单数据的解决方法

    问题背景: 在填写完表单提交时,由于某个表单项可能填写的不合法,导致提交失败,返回表单页面.但返回后所有的表单都被清空了,重新填写比较麻烦,度娘解释说,是由于每个页面都调用了session_start ...