elementUI implements the table header to display the upper and lower corners

Vue (elementUI) table header and content use sup and sub tags to realize superscript and subscript

I wrote a version of the upper and lower corner marks that were directly copied and pasted before. Some enthusiastic netizens asked how to deal with the corner marks if they were Chinese characters. So with this article, the old rules are first shown in the picture.

image display

In the figure, the superscript and subscript operations are implemented in the table header and content.

the code

The code is like this, you can copy and use

<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>