elementUI实现table表头展示上、下角标

最新推荐文章于 2024-05-27 11:43:39 发布

远方宁静依然

最新推荐文章于 2024-05-27 11:43:39 发布

阅读量5.5k

点赞数

分类专栏： vue element UI 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_41648113/article/details/115184922

版权

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

element UI

6 篇文章

订阅专栏

本文介绍了如何在Vue结合ElementUI的表格组件中使用HTML的`<sub>`和`<sup>`标签实现表头和内容的上角标与下角标展示。通过示例代码，展示了在表格单元格内插入角标的方法，以满足不同场景的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue（elementUI）table表头、内容用 sup、sub标签实现上角标、下角标

之前写了一版直接复制粘贴的上下角标，有热心网友咨询角标是汉字该怎么处理，于是有了这篇文章，老规矩先上图

图片展示

图中实现了在table表头和内容中实现上角标下角标操作。
在这里插入图片描述

代码

在这里插入图片描述
代码是这样的，可以复制使用

<el-table-column min-width="170" align="center">
	<template slot="header">
		你好世界(你好<sub>你好</sub>,世界<sup>世界</sup>)
	</template>
</el-table-column>
<el-table-column label="你好" min-width="120" align="center">
	{{你好世界<sup>你好，世界</sup>}}
</el-table-column>