说说如何在 element UI 的 Table 数据中加入跳转链接

3,657 阅读1分钟

我们使用 Vue.js 的 slot-scope 特性,来实现加入跳转链接功能。

<template> 上使用特殊的 slot-scope 特性,可以接收传递给插槽的 prop 属性。

示例:

<el-table-column
		prop="name"
		label="任务"
		align="left"
		width="900"
>
   <template slot-scope="scope">
	   <a :href="scope.row.url" target="_blank">
		   {{scope.row.name}}
	   </a>
   </template>
</el-table-column>

运行结果:


Vue.js v2.6.0 为具名插槽和作用域插槽引入了一个新的统一的语法,即 v-slot 指令。slot-scope 特性将从 Vue3 中移除。