问题????????
slot-scope="{row}"这个是什么意思?求助。。elementui的表格吗,拿到当前行的数据,具名插槽传值。
哦哦 谢谢~ 那这个要学是补什么知识?这个是vue element里面有的吗?????vue课程的插槽和具名插槽知识 B站 coderwhy vue,安排。
@小白问题多努力学 建议从vue基础开始学起,那个课程。B站 找个黑马 或者尚硅谷的 教程学vue。coderwhy老师的vue课程,B站有他的课程。
@小白问题多努力学 你可能需要先多看一下JS书籍,基础偏弱了很多。这个在element文档有的。
Vue slot-scope=‘scope‘的理解
首先要理解2个知识点:
1.插槽
2.作用于插槽
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个概念这里就点出来了,是显示不显示和怎样显示。
作用域插槽实际上是带有数据的插槽,可以获取到父组件传递的参数,将这些参数使用到子组件插槽里
<w-table-column prop="je" label="总价" width="100">
<template slot-scope="scope">
<span>{{Number(scope.row.je).toFixed('2')}}</span>
</template>
</w-table-column>
其实这一段很多时候也会用到显示表格时,当前行数据的获取也会用到插槽
<el-table>
<el-table-column width="150" align="center" label="Status">
<template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">
{{scope.row.status}}
</el-tag>
</template>
</el-table-column>
</el-table>
之前好像直接是scope,现在统一成了slot-scope,其语义更加的明确。scope相当于一行的数据, scope.row相当于当前行的数据对象。这里就是用插槽 拿到当前行 row是个内置的属性 ,vue slot的scope传递值是父作用域中的源数据改变,值会同步改变。且{{scope.$index}}可以获取当前行的index。
// index可以用来设置index, :row 可以设置行内内置对象
<slot :row="item" :$index="i"></slot>
也可以参考此篇讲解,个人感觉写得很详细很到位。
https://blog.csdn.net/houyibing930920/article/details/89513246
————————————————
版权声明:本文为CSDN博主「菜鸟小奇奇」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qyl_0316/article/details/107360542