element 若依表格内的超链接跳转

叫我小智哥哥就好

已于 2022-09-13 16:25:55 修改

阅读量3.6k

点赞数 6

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-09-13 16:24:25 首次发布

本文链接：https://blog.csdn.net/s212571231/article/details/126835880

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<el-table-column
  label="链接地址"
  align="center"
  prop="linkAddress"
  :show-overflow-tooltip="true"
  >
    <template scope="scope">
       <el-link type="primary" :underline="false" :href="scope.row.linkAddress" target="_blank">{{ scope.row.linkAddress }}</el-link>
    </template>
</el-table-column>

上述方法如果不是完整的url链接只是像下图一样的写法那链接并不会跳转到对应页面

点击后地址就变成了这样：http://localhost:82/dev/www.baidu.com 他直接走的路由地址这样就触发了若依的404页面

这样的话只要进行字符串拼接即可

<el-table-column
   label="链接地址"
   align="center"
   prop="linkAddress"
   :show-overflow-tooltip="true"
   >
     <template scope="scope">
        <el-link type="primary" :underline="false" :href="'http://'+ scope.row.linkAddress" target="_blank">{{ scope.row.linkAddress }}</el-link>
     </template>
</el-table-column>

这样就可以正常跳转了

注：记录遇到的问题学习使用，侵权立删