element-ui 表格中el-table-column 添加 icon以及获取用户点击的按钮id

最新推荐文章于 2024-08-30 10:55:48 发布

兔兔uu

最新推荐文章于 2024-08-30 10:55:48 发布

阅读量2.4k

点赞数 1

分类专栏： element-ui 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/m0_58858998/article/details/120531667

版权

element-ui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Element UI的el-table组件中利用slot和template标签来自定义列内容，特别是展示了如何创建操作列并在其中添加查看详情按钮，同时实现点击按钮获取用户id的方法。通过这种方式，可以灵活地为表格添加交互功能。

摘要由CSDN通过智能技术生成

只需要在 el-table-column 标签中利用slot增加 template 标签来实现就可以啦(๑•̀ㅂ•́)و✧

如果需要获取用户点击按钮id，也可以利用slot增加 template 标签来实现

代码如下

<el-table :data="tableData" stripe>
    <el-table-column type="index" label="序号" width="100"></el-table-column>
	<el-table-column prop="name" label="视频名称">
		<template slot-scope="scope">
			<i class="el-icon-video-play"></i>
			{{scope.row.name}}
		</template>
	</el-table-column>
	<el-table-column prop="data.status" label="状态"></el-table-column>
	<el-table-column prop="atime" label="更新时间"></el-table-column>
	<el-table-column label="操作">
		<template slot-scope="scope">
			<el-button type="text" @click="onDetail(scope.row.id)">查看详情</el-button>
		</template>
	</el-table-column>
</el-table>