element UI 的 Table 数据动态渲染跳转链接

本文介绍如何在Vue的template标签中利用slot-scope特性,接收并使用传递给插槽的prop属性,具体演示了如何在el-table-column中获取当前行的jump属性值,用于动态渲染链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前置知识点:在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属性值(要渲染的链接)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值