Author:Mr.柳上原
ant框架里,Table表格组件里跳转页面及传递数据的方法 在Table表格组件中,经常会遇到表格里有跳转页面的需求 跳转方法大致与普通react页面路由方法类似 依然是在columns方法里对需要跳转的td位置进行render自定义设置 设置方法如下:
// 使用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});
}
注意点: 别忘记把子页面引入
import ShopDetails from '../shop/shopDetails'; // 详情页
也别忘了在写上路由
<LayerRouter>
<Route path={`${this.props.match.url}/shopDetail`} render={props => <ShopDetails {...props} />} />
</LayerRouter>