vue el-table中跳转新网页 demo

最新推荐文章于 2024-02-09 08:00:00 发布

原创最新推荐文章于 2024-02-09 08:00:00 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在前端开发中实现购买链接展示的两种方法：一种是直接使用a标签进行链接跳转；另一种是通过按钮点击触发跳转。这两种方法都能实现在新标签页中打开链接的功能。

方式一：

<el-table-column prop="shopUrl" label="购买地址" align="left" width="220">
          <template slot-scope="scope">
             <a target="_blank" :href="scope.row.shopUrl" style="white-space:nowrap"><u>{{scope.row.shopUrl}}</u></a>
          </template>
        </el-table-column>

target="_blank" 标签打开新网页

方式二：

<el-table-column prop="shopUrl" label="购买地址" align="left" width="220">
          <template slot-scope="scope">
           <el-button size="mini" type="text" style="width: 120px;" @click="jumpView(scope.row.shopUrl)">
             <span style="white-space:nowrap"><u>{{scope.row.shopUrl}}</u></span>
            </el-button>
          </template>
        </el-table-column>

jumpView(url){//跳转购买网址
      console.log('跳转购买网址=======start:'+url)
      //window.location = url;//当前页跳转新网页
      window.open(url);//打开新网页跳转至新网页
    },

效果：