Vue:使用slot-scope插槽

2024-07-11 10:20:58 浏览数 (2)

slot-scope介绍

  • slot-scope就是作用域插槽。官方叫它作用域插槽,实际上,对比具名插槽,我们可以叫它带数据的插槽。具名插槽在组件的template里面写,作用域插槽要求,在slot上面绑定数据。

实例

如何使用slot-scope

代码语言:javascript复制
<el-table-column prop="report_name" label="diff结果">
          <template slot-scope="scope">
            <a :href="'http://host.com/report/' scope.row.report_name" target="_blank" class="buttonText"
               onclick='window.open("http://host.com/report/" scope.row.report_name)'>{{
              "host.com/report/" scope.row.report_name }}</a>
          </template>
</el-table-column>

上述实现的功能

template(模版) 在这里属于一个固定用法:`<template slot-scope="scope">`,我们只是能通过scope.row获得当前的行数据

1、href:拼接scope.row.report_name,赋值跳转链接 2、onclick:拼接scope.row.report_name,生成新打开标签的URL链接 3、{{ }}:拼接scope.row.report_name,当前行显示的链接文本

展示效果

0 人点赞