react with table

最新推荐文章于 2024-10-18 15:31:10 发布

weixin_30432007

最新推荐文章于 2024-10-18 15:31:10 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yuanyuan0809/p/6959157.html

本文介绍了一个表格组件的配置方法，包括列定义、分页及数据请求等关键部分。通过具体代码示例展示了如何设置表格列标题、数据索引及渲染方式，并实现了自定义分页逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格相关

<Table dataSource={data} className="mt1" columns={columns} pagination={pagination}  rowKey={record => record.city_id}/>

const columns = [{
      title: '学校名称',
      dataIndex: 'school_name',
      key: 'school_name',
      render:(text,record)=>{
        if(text!=null){
          return (<span title={text}>{text.length>15?text.substring(0,15)+'...':text}</span>)
        }
      }
    }]

var page = {
      onChange: (index) => {
        var params={
          pageIndex: index,
          pageSize: 10,
          filter: {
            city_code: this.state.cityCode,
            school_name: this.state.schoolName
        }};
        this.props.dispatch(actions.getlList(params));
      },
      total: parseInt(count),
      showTotal: (total) => {
        return `共 ${count} 条`
      },
      showQuickJumper: false,
      showSizeChanger: false,
    }

表格中的key不允许有空格，dataIndex属性为必须，确保datasource为数组形式

转载于:https://www.cnblogs.com/yuanyuan0809/p/6959157.html