前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react-开发经验分享-Table表格组件里跳转页面及传递数据

react-开发经验分享-Table表格组件里跳转页面及传递数据

作者头像
Mr. 柳上原
发布2019-03-01 10:22:59
1.3K0
发布2019-03-01 10:22:59
举报
文章被收录于专栏:菜鸟前端工程师

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

ant框架里,Table表格组件里跳转页面及传递数据的方法 在Table表格组件中,经常会遇到表格里有跳转页面的需求 跳转方法大致与普通react页面路由方法类似 依然是在columns方法里对需要跳转的td位置进行render自定义设置 设置方法如下:

代码语言:javascript
复制
// 使用onClick进行按键触发跳转,并且可以传参给子页面
// 传递的参数在子页面的props.location.state对象里面
columns = [
        {
            title: '操作',
            width: 120,
            dataIndex: 'operation',
            key: 'operation',
            align: 'center',
            fixed: 'right',
            // 跳转详情页
            render: (text, record) => {
                return <a onClick={() => this.toShopDetails(record.id)}>商铺情况</a>
            }
        },
]

// 跳转详情页
    toShopDetails = (id) => {
        this.props.history.push(`${this.props.match.url}/shopDetail`, {id});
    }

注意点: 别忘记把子页面引入

代码语言:javascript
复制
import ShopDetails from '../shop/shopDetails'; // 详情页

也别忘了在写上路由

代码语言:javascript
复制
<LayerRouter>
     <Route path={`${this.props.match.url}/shopDetail`} render={props => <ShopDetails {...props} />} />
</LayerRouter>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.01.11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档