前置知识点:在template标签上使用特殊的 slot-scope 特性,可以接收传递给插槽的 prop 属性,获取 row (当前行信息)
代码:
<el-table-column label="跳转" prop="jump">
<template slot-scope="scope">
<a :href="scope.row.jump">{{scope.row.jump}}</a>
</template>
</el-table-column>
data() {
return {
// 列表数据(测试数据)
tableData: [
{
Title: '非税',
Code: 'G000001',
province: '非洲',
jump: 'http://baidu.com',
startTime: '2020.10.01',
endTime: '2020.10.02',
content: '喵喵喵',
},
{
Title: '非税',
Code: 'G000001',
province: '非洲',
jump: 'http://taobao.com',
startTime: '2020.10.01',
endTime: '2020.10.02',
content: '喵喵喵',
}
],
}
},
注意:
el-table-column:是每一列的表头
label:表头绑定的文字
prop:绑定一个字段,用来渲染表格的文本
:href:动态渲染时要加冒号 :href
scope.row.jump :获取当前行的jump属性值(要渲染的链接)