slot-scope=“{row}” 或者 slot-scope="scope" 都可以获取到当行的数据,一般用在elementUI 的table 表格比较多,当需要对当行数据进行操作或者作判断的时候使用
<el-table-column prop="adminFlag" label="管理员">
<template slot-scope="{row}">
{{ row.adminFlag===true?'是':'不是' }}
</template>
</el-table-column>
<el-table-column prop="groupMemberCount" label="群成员数量">
<template slot-scope="scope">
<span
class="person-num"
@click="showGroupMembers(scope.$index, scope.row)"
@mouseenter="handleEnter($event)"
@mouseleave="handleLeave($event)"
>
{{ scope.row.groupMemberCount }}
</span>
</template>
</el-table-column>
还有这种的
<template v-for="(item, index) in tableOption">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
:align="item.align || 'center'"
:show-overflow-tooltip="item.overHidden || true">
<template slot-scope="scope">
// 这里通过插槽实现自定义列
<slot
v-if="item.slot"
:name="scope.column.property"
:row="scope.row"
:$index="scope.$index"
/>
<span v-else>{{ scope.row[scope.column.property] }}</span>
</template>
</el-table-column>
</template>
这里有一篇详细介绍:https://www.cnblogs.com/mandy-dyf/p/11528505.html
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。