iView中Table的column表头需要有上标出现的问题

现象描述:

        在使用iView界面组件的Table组件时,需要在表头里添加面积这个选项,代码概要如下

listcolumns: [{
    title: '面积(m2)',
    key: 'Mj',
    align: 'center'
}]

        结果如预期所示

        

        然后添加<sup>

listcolumns: [{
    title: '面积(m<sup>2</sup>)',
    key: 'Mj',
    align: 'center'
}]

        发现并没有什么用,猜想应该是在title内,应该是直接解析为字符串,而不是原生html代码(C#里有个@Html.Raw)

解决问题:

        参考iView官方文档,找到一个renderHeader的方式来实现渲染,于是写出整体,然后逐渐摸索(修改细节展示效果)

{
                    	title: '面积(m2)',
                        key: 'Mj',
                        type: 'html',
                        align: 'center',
                        className: 'zzrwMj_css',
                        renderHeader:(h,params)=>{
                        	return h('div', {style: {
										display: 'table',
										height: '23px'
					            	}},[
					        	h('span', 
					        		{style: {
					                	display: 'inline-block',
					                	overflow: 'hidden',
					                	textOverflow: 'ellipsis',
					                	whiteSpace: 'nowrap',
					                	lineHeight: '23px',
					                	display: 'auto'
					            	}
					        	}, '面积(m'), 
				        		h('sup',{style:{
				                	top: 8
				            	}},'2'),
					    		h('span',
					    			{style:{
					                	display: 'inline-block',
					                	overflow: 'hidden',
					                	textOverflow: 'ellipsis',
					                	whiteSpace: 'nowrap',
					                	lineHeight: '23px',
					                	display: 'auto'
					            	}},')')
                        	]);
                        }

        结果如下,成功


感想:


        思路和整体仅供参考,细节可以继续优化。对render函数的结构是一个很好的理解。

        我个人觉得可能有更简单的方式实现类似于平方米sup或者更多原生html,也希望大家能够指点。


猜你喜欢

转载自blog.csdn.net/u014418725/article/details/79556565
今日推荐