element表格数据,表头上(下)角标,html字符串渲染

1. 问题描述

在动态渲染的element表格中,表头和表中数据是一个含有html的字符串,需要渲染

2. 效果


3. 代码
复制代码
const columns = ref([
  { text: '差值<sub>-3</sub> / 10<sup>-6</sup>℃<sup>-1</sup>', value: 'aallowErrorLower', align: 'center', required: true, width: '160' },
  { text: '世界<sub>和平</sub> / 国家<sup>富强</sup>', value: 'aallowErrorLower', align: 'center', required: true, width: '160' },
])

<el-table
      ref="tableRef"
      v-loading="tableLoading"
      :data="list"
    >
      <el-table-column
        v-for="item in columns"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
      >
        <template #header>
            <span v-html="item.text" />
        </template>
        <template #default="scope">
        	//在这里,表格数据的值为 △α/10<sup>-6</sup>℃<sup>-1</sup>
        	// 使用将字符串转化为html即可实现
           <div v-html="scope.row[item.value]" /> 
        </template>
      </el-table-column>
    </el-table>
相关推荐
Csvn5 小时前
OpenSpec 详细使用教程
前端
之歆5 小时前
Day19_LESS 完全指南——从入门到工程实践
前端·css·less
云水一下6 小时前
HTML5 从入门到精通:实战收官——从零搭建完整静态网站,综合运用所有知识
前端·html5
不总是6 小时前
Windows 系统 Node.js 免安装版(zip)安装与配置教程(2026 最新)
前端·windows·node.js
冬奇Lab7 小时前
每日一个开源项目(第105篇):Twenty - 跳出 Salesforce 的圈套,定义现代开源 CRM
前端·后端·开源
zhangyao9403307 小时前
开发pc端时,表格的高度怎么设置才能铺满页面
前端·javascript·elementui
kjs--8 小时前
浏览器书签执行脚本
前端
之歆8 小时前
Day16_JavaScript 轮播图与事件工程实战(下篇)
服务器·开发语言·前端·javascript·网络·性能优化
沄媪8 小时前
CSRF 跨站请求伪造
前端·ctf·csrf
kyriewen9 小时前
我关掉了Copilot:因为我写的代码出现在了别人的建议里
前端·javascript·ai编程