Vue：使用slot-scope插槽

沈宥

发布于 2024-07-11 10:20:58

750

发布于 2024-07-11 10:20:58

文章被收录于专栏：从头开始学习测试开发

slot-scope介绍

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

实例

如何使用slot-scope：

<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,当前行显示的链接文本

展示效果：