VUE-001-在表格單元格（el-table-column）中添加超鏈接訪問

在進行前端網頁開發時，通常列表數據我們使用table展示。那么如何在 el-table-column 單元格中使用超鏈接呢？

 

如下即是解決方式的一種：

 

僅需要將如下代碼：

<el-table-column prop="url" label="訪問鏈接" width="400" show-overflow-tooltip></el-table-column>

修改為如下代碼即可：

<el-table-column label="訪問鏈接" width="400" show-overflow-tooltip>
  <template slot-scope="scope">
    <a :href="scope.row.url" target="_blank" class="buttonText">{{scope.row.url}}</a>
  </template>
</el-table-column>

 

最終效果展示如下所示，點擊超鏈接，即可在新窗口打開訪問頁面：