vue el-table中跳转新网页 demo

 方式一：

<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);//打开新网页跳转至新网页
    },

效果：