iview渲染table的时候让table中的某列数据可以加上点击跳转效果

最新推荐文章于 2023-04-11 11:03:35 发布

原创

最新推荐文章于 2023-04-11 11:03:35 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#iview渲染table

本文介绍了如何在使用iview渲染table时，通过render函数为某一列数据添加点击跳转效果，解决因a标签默认添加当前项目路径导致的问题。通过在href属性中添加双斜杠（//）来实现正确跳转到目标URL。

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

效果：展示效果

目前iview支持自定义template，这种可以在渲染的时候就自定义展示

但是我们项目套用时候用的是旧的那种，一直沿用也懒得改，所以今天搜了一下解决方案：利用render函数

{
            title: 'VR素材',
                    key: 'vrProjectName',
                    width: 180,
                    align: 'center',
                    render: (h, params) => {
//                return params.row.vrProjectName;
                return h("span",
                        {
                            domProps: {
                                innerHTML: "<a href='"+params.row.vrUrl+"' target='_blank'>"+params.row.vrProjectName+"</a>",
                            }
                        }
                    )
            }
        },

关于项目中a标签跳转，总是会自动加上当前项目路径

<a href="xinfang.jd.com">点击跳转</a>要是这样点击的话就会变成当前项目路径：localhost什么