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