背景:
跳转前代码:未显示蓝色字体以及点击无效
columns: [
{key: 'licPltNo', title: '车牌号', width: 80, fixed: 'left'},
…………
{
key: 'operation',
title: '充电明细',
align: 'center',
width: 70,
fixed: 'right',
}
],
注释:
fixed: 列是否固定在左侧或者右侧,可选值为 left 左侧和 right 右侧
代码修改:
columns: [
{key: 'licPltNo', title: '车牌号', width: 80, fixed: 'left'},
…………
{
key: 'operation',
title: '充电明细',
align: 'center',
width: 70,
fixed: 'right',
//两个参数:h params
render: (h, params) => {
return h('router-link', {
props: {
to: {
//跳转到【name】这个文件名的组件
name: 'charge-detail',
//query:请求参数(params中的请求参数)
query: {
orgIds: params.row.carId,
beginTime: params.row.rcrdDate,
endTime: params.row.rcrdDate
}
}
}
}, '详情');
}
}
],
注释:
1.render:自定义渲染列,使用 Vue 的 Render 函数。
2.props:动态传参