现象描述:
在使用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,也希望大家能够指点。