Vue数据插槽

Vue数据插槽

1 使用注意事项

1.数据插槽只能在<template v-slot="scope" ></template>标签中被定义
2.scope.row代表一行数据,我们需要从中拿出某一个数据使用
3.使用scope.row.id可以拿到这一行数据的id

示例

<el-table-column label="操作">`
					
	<template v-slot="scope" >					
		<template v-if="scope.row.active==='1'">
			<el-button size="mini" type="primary"   @click="edit(scope.row.id)">修改</el-button>
			<el-button size="mini"  type="danger" @click="del(scope.row.id,0)">删除</el-button>								
	  	</template>
						
		<template v-else>
			<el-button size="mini" type="warning" @click="del(scope.row.id,1)">恢复</el-button>									
		</template>				
   </template>
					
</el-table-column>	

Guess you like

Origin blog.csdn.net/Ssucre/article/details/116717217