精华内容
参与话题
问答
  • 蚂蚁金服antd-Table-基本用法

    千次阅读 2018-01-27 22:47:23
    /** * Created by mapbar_front on 2018/1/27. */ import React,{ Component } from 'react';...import { Table,Icon,Divider } from 'antd'; const data = [{ key: 1, name: '天下', age: 18, hobb
    /**
     * Created by mapbar_front on 2018/1/27.
     */
    
    import React,{ Component } from 'react';
    import { Table,Icon,Divider } from 'antd';
    
    const data = [{
        key: 1,
        name: '天下',
        age: 18,
        hobby: '看书',
        address: '甘肃省',
    },{
        key: 2,
        name: '晓晓',
        age: 22,
        hobby: '旅游',
        address: '华池县',
    },{
        key: 3,
        name: '远远',
        age: 18,
        hobby: '远方',
        address: '武汉市',
    },{
        key: 4,
        name: '青菜',
        age: 23,
        hobby: '跳舞',
        address: '黄冈市',
    }]
    
    const columns = [{
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        render: text => <a href="#"> { text } </a>
    },{
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
    },{
        title: '爱好',
        dataIndex: 'hobby',
        key: 'hobby',
    },{
        title: '地址',
        dataIndex: 'address',
        key: 'address',
    
        // render: (text,record) =>{
        //     console.log('text',text); //text为地址的每一项,甘肃省、华池县、武汉市、黄冈市
        //     console.log('record',record);//record 为多个个对象,例如第一个对象为:{ name: '天下',age: 18,hobby: '看书',address: '甘肃省' }
        // }
    
        render: (text,record)=>(
            <span>
                <a>address-- { record.address }</a>
                <Divider type="vertical"></Divider>
                <a href="#">delete</a>
                <Divider type="vertical"></Divider>
                <a className="antd-dropDown-link">
                    More actions <Icon type="down" />
                </a>
            </span>
        )
    }]
    
    class BasicUse extends Component {
        constructor(props) {
            super(props);
            this.state = {
    
            }
        }
    
        render() {
            return (
                <div>
                    <h2>基本用法</h2>
                    <Table dataSource={ data } columns={ columns }/>
                </div>
            )
        }
    }
    export default BasicUse;
    

    展开全文
  • Antd使用心得-table组件

    万次阅读 2017-12-21 22:06:21
    近日公司的一个项目PC端采用了antd,使用中必然遇到很多难点,我在写table的时候遇到了两个地方: 1:table组件自带的分页 官方介绍的是这样的 当是没注意这个地方可以穿object,后来仔细的找了一遍,发现是可以传...

    近日公司的一个项目PC端采用了antd,使用中必然遇到很多难点,我在写table的时候遇到了两个地方:

    1:table组件自带的分页

    官方介绍的是这样的


    当是没注意这个地方可以穿object,后来仔细的找了一遍,发现是可以传pagination的api的,传入方式为object

    2.table组件sorter触发问题

    开始写的时候一直在想,这么到底怎么辨别是升序还是降序呢

    给的demo是这样的


    这个只是按照列头来控制的,我要是的排序后台已经处理好了,我只要传入对应的参数,可是我不知道怎么区分升降序,这个地方花了我一些时间,后来看到有个onchange方法,返回的参数有个sorter,里面有升降序参数


    这个方法只有翻页,筛选条件(不包含自定义筛选方法),排序才会触发。


    果然组件还是很牛逼,第一次用要看的东西挺多,不然你都不知道有这个方法。

    展开全文
  • antd table表的全部展开

    千次阅读 2019-08-01 10:59:11
    antd table组件,在项目中,出场相当频繁,样式也繁多 Now,要说的时table的展开功能 table属性 defaultExpandAllRows :初始时,是否展开所有行。以为是个王者属性,对于全部展开的需求,不要太简单哦。如此窃喜...

    antd table组件,在项目中,出场相当频繁,样式也繁多

    Now,要说的时table的展开功能

    table属性 defaultExpandAllRows :初始时,是否展开所有行。以为是个王者属性,对于全部展开的需求,不要太简单哦。如此窃喜的我,却因此掉到自己挖的坑中。

    开发第一步是画界面,mock数据填充。由于需求要求初始时,全部展开,试了下table属性 defaultExpandAllRows,完完全全就是想要的样子,超级开心

    mock数据结束,界面数据通过接口请求来,发现,数据渲染后,所有项都是闭合的,没有展开。

    于是开始一点一滴地对比mock数据时的逻辑,难道mock时,用的是children字段,才出现展开行的。现在的数据不是children字段,而我用的table属性childrenColumnName(指定属性结构的列名)造成影响了。我写了递归调用,将 指定属性结构的列名 替换为 children 字段。再看,还是不行。。。

    排除了和 属性结构的列名 没关系后,开始查看数据逻辑,初始没有请求时,数据为空数组,而 table属性 defaultExpandAllRows 就是在此可起作用的,分析到此,认定了table属性 defaultExpandAllRows 根本不是什么王者属性,还得自己递归解析出数据中有展开行的rowkey, 在赋值给table属性expandedRowKeys,控制行的展开,坑,,,,呀

     

    总结:

    对于请求来的 table 表数据,实现展开所有行功能

    table属性 defaultExpandAllRows :没用

    table属性expandedRowKeys:有用,需要自己解析数据中所有展开行的[rowkey, rowkey, ...],再赋值给该属性

    展开全文
  • antd table表格组件基本使用

    千次阅读 2019-10-08 16:49:12
    第一次使用antdtable表格组件,借用官方文档数据,展示下Demo import React from 'react'; import { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', render: text => <a&...

    第一次使用antd的table表格组件,借用官方文档数据,展示下Demo

    import React from 'react';
    import {  Table } from 'antd';
    const columns = [
        {
          title: 'Name',
          dataIndex: 'name',
          render: text => <a>{text}</a>,
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
        },
      ];
    const data = [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
        {
          key: '4',
          name: 'Disabled User',
          age: 99,
          address: 'Sidney No. 1 Lake Park',
        },
      ];
    export default class Basic extends React.Component{
        render(){
            const rowSelection = {
                onChange: (selectedRowKeys, selectedRows) => {
                  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                },
                getCheckboxProps: record => ({
                  disabled: record.name === 'Disabled User', // Column configuration not to be checked
                  name: record.name,
                }),
              };
              return (
                  <div>
                       <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
                  </div>
              );
          
        }
    }
    

    效果如下
    在这里插入图片描述

    展开全文
  • antd-Table 的大坑

    千次阅读 2019-05-10 15:32:27
    antd-Table 的大坑 我在使用Table 的选择和操作这个用法的时候,会出现第一页全选了什么,第二页也选了什么。在我选择了第二页之后,输出selectedRowKeys,得到的数据和选择第一页,废话不多说,看图: 第二页和第一...
  • bug单: https://github.com/ant-design/ant-design/issues/13825 1.设置固定宽度:在columns中设置widht或者className { title: '年龄', dataIndex: 'age', key: 'age', ...},...
  • antd-table

    2019-10-24 10:05:52
    nz-table #nzTable [nzDataSource]="tableList" [nzPageSize]="10" [nzIsPagination]="false" [nzLoading]="_isSpinning" [nzCustomNoResult]="_isSpinning"> <tr nz-tbody-tr *ngFor="...
  • antd Table使用记录

    千次阅读 2018-09-12 14:59:38
    1.antd table如何关闭hover效果? 需求原因:对于普通表格来说,antd表格的hover完全是可以的,但是在单元格进行了合并的复杂表格中,就会显得很怪; 解决方法: 样式覆盖--------------------- .ant-table-...
  • antd Table表格 单选按钮

    千次阅读 2018-10-19 10:39:51
    引入antd的表格后: <Table bordered columns={columns} dataSource={dataSource} rowSelection={rowRadioSelection} pagination={false}rowKey={dataSource => dataSource.openid}/> 单选与多选使用的是...
  • antd table 分页

    千次阅读 2019-10-25 20:21:08
    4个步骤实现table的分页 table 参数设置 state = { pagination: { pageSize: 10 }, }; <Table rowKey={e => e.id} dataSource={this.state.list} columns={columns} ...
  • antd table全选

    2019-01-07 14:28:00
    1、 render(){  let { list,cityList,ischecked,selectedRowKeys,selectedRows} = this.state  const rowSelection = {  selectedRowKeys, ... onChange:this.handleRowSelectChange, ... onS...
  • react antd table 使用示例

    千次阅读 2018-08-09 10:43:21
    const { Table } = antd; const columns = [{ title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }]; const data = []; for (...
  • Antd Table 整行样式

    2019-11-26 13:24:13
    <Table columns={item.columns.map((col,index)=>{ return{ ...col, onHeaderCell:()=>{ ...
  • antd table 行点击事件及行高亮显示

    万次阅读 2018-09-04 12:12:14
    1.antd官网表格组件: ... 2.引用antd的表格组件,即: import {Table} from ‘antd’; 渲染表格组件: 说明: (1)rowClassName属性是添加表格行样式属性,此时的this.setCla...
  • 使用 antd 开发 PC端应用的人肯定知道的 Table 组件。一个功能很完善,界面很优化的表格组件。通过查阅官方文档,你可以很轻松地使用这个组件。但是如果表格中涉及到合并单元格昵?
  • 其实antd本身可以支持上述业务需求。 但:出现的问题如下 (1)当我勾选多条并点击批量拒绝后,再次多选进行操作时,查看选中数据不仅仅是当前选中的数据,还包含上次选中的数据。 (2)当我选中多条进行操作成功...
  • antd Table 展开行可全部展开或关闭

    千次阅读 2019-12-18 18:45:42
    技术实现前提: React + antd Table + Hooks + tsx 在 antd Table 上并没有找到这个属性,所以就自己上手来解决一下咯。 实现思路: 写一个同级的 div ,设置其css属性,让它绝对定位到 父表格对应的th上 设置其打开...
  • Antd Table表头加Icon和气泡提示的坑

    千次阅读 2019-07-25 20:37:33
    对于Antd Table组件的columns数组来说,它需要接受2个属性(filterDropdown,filterIcon)才能在表头某个属性旁展示图标Icon: columns: [{ title: '表达式', dataIndex: 'formulaTenderAmount', key: '...
  • antd table 表格错位的问题

    千次阅读 2019-05-21 17:27:13
    当遇到antdtable表格错位的时候,看文档,文档上说的是,要设置每一列的宽度,但是已经设置了,却还是错位。后来经过查找资料,发现最后一列就不用设置的话,就不会再错位,因为antd会自己给最后一列分配宽度。 在...
  • AntD Table通过数据状态控制行内"删除"状态, 结合三元表达式! import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import ...
  • antd Table中插入可编辑的单元格

    万次阅读 热门讨论 2018-08-30 16:08:29
    看了antd Table 的官方组件,发现不太灵活,所以自己动手写了一下。 实现的思路大同小异,在columns中插入Input,很简单的,直接render中返回就好,只是中间遇到小插曲,改变一个input的值所有的都跟着改变,原来是...
  • react antd table 全选

    2019-09-25 21:07:52
    import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css';...import { Table } from 'antd'; const columns = [{ title: 'Name', dataIndex: 'name',...
  • 使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论。 在this.state中初始化数据: this.state = { pageNum:1, /*翻页查询*/ pageSize:10, /*分页查询*/ activePage: 1, /*...
  • Antd Table组件表头不对齐解决方案

    千次阅读 2019-07-05 11:14:37
    Antd Table组件表头不对齐解决方案 背景: 在使用Antdtable组件时,由于表头参数过多,于是设置了scroll属性,在其超出一定宽度后进行滚动 但是在添加了该属性之后,经常会出现表头不对齐的问题: 针对该问题...
  • antd table添加序号

    2020-10-13 14:41:01
    每一页都从1开始 分页连续自增序号 const columns = [ { title: ' 序号 ', // render: (text, record, index) => `${index + 1}`, //每一页都从1开始 render:(text, record, index) =>...
  • antd Table设置固定高度

    千次阅读 2019-07-10 16:37:00
    antdtable 高度是根据数据条数来渲染撑高的。 碰到领导要求,table有个固定高度,因为数据只有一两条的时候界面难看。然后在antd的https://github.com/ant-design/ant-design/issues?utf8=%E2%9C%93&q=...
  • antd table 列头和内容不对齐

    千次阅读 2018-12-27 09:28:47
    我是在已经给 每一列设置了宽的时候,依然遇到了列头和内容不对齐的情况,最后经过查询,得到的是,给最后一列不设置宽度,让其自己伸缩,就可以解决这个问题了...
  • antd table 添加行,编辑行,删除行

    千次阅读 2019-09-18 10:24:26
    目标 添加行:点击添加行,当有行在编辑并未进行保存时提示先保存;表格行中未有未保存的内容时,表格最后加一行... 删除行:所在行删除 保存行:保存所在行 详细代码 index.js import React from 'react';...import...
  • antd table 排序

    千次阅读 2019-05-17 17:44:38
    1,效果图如下 2,代码如下 @Form.create() class StudentsList extends PureComponent { state = { eAdd:"", eEdit:"", eDestroy:"", filteredInfo: null, sortedInfo: null, pageQuery:'', }...
  • import {Table} from "antd"; import React from "react"; /** * 分页加载表格 * 每页请求一次 * 函数组建无法实例化,需要在初始化时传入第一页数据. * @param props * @constructor */ export default ...

空空如也

1 2 3 4 5 ... 20
收藏数 4,450
精华内容 1,780
关键字:

antd table