1. 程式人生 > >頁面跳轉傳參(1)

頁面跳轉傳參(1)

背景:

跳轉前程式碼:未顯示藍色字型以及點選無效

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:動態傳參