前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >slot 插槽的使用

slot 插槽的使用

原创
作者头像
xyzzz
修改2020-12-03 10:34:41
1.8K0
修改2020-12-03 10:34:41
举报
文章被收录于专栏:前端学习。前端学习。

slot 插槽的作用

slot-scope=“{row}” 或者 slot-scope="scope" 都可以获取到当行的数据,一般用在elementUI 的table 表格比较多,当需要对当行数据进行操作或者作判断的时候使用

插槽的使用

代码语言:javascript
复制
<el-table-column prop="adminFlag" label="管理员">
        <template slot-scope="{row}">
          {{ row.adminFlag===true?'是':'不是' }}
        </template>
</el-table-column>

代码语言:javascript
复制
 <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>

还有这种的

代码语言:javascript
复制
<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 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • slot 插槽的作用
  • 插槽的使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档