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>
相关推荐
我即将远走丶或许也能高飞1 小时前
vuex 和 pinia 的学习使用
开发语言·前端·javascript
钟离墨笺1 小时前
Go语言--2go基础-->基本数据类型
开发语言·前端·后端·golang
爱吃泡芙的小白白1 小时前
Vue 3 核心原理与实战:从响应式到企业级应用
前端·javascript·vue.js
卓怡学长2 小时前
m115乐购游戏商城系统
java·前端·数据库·spring boot·spring·游戏
老陈聊架构2 小时前
『AI辅助Skill』掌握三大AI设计Skill:前端独立完成产品设计全流程
前端·人工智能·claude·skill
Ulyanov3 小时前
从桌面到云端:构建Web三维战场指挥系统
开发语言·前端·python·tkinter·pyvista·gui开发
cypking3 小时前
二、前端Java后端对比指南
java·开发语言·前端
糠帅傅蓝烧牛肉面3 小时前
单实例多MCP聚合服务:两种实现方案深度对比
前端·docker·ai
JosieBook4 小时前
【Vue】12 Vue技术—— Vue 事件修饰符详解:掌握事件处理的高级技巧
前端·javascript·vue.js
艾斯特_4 小时前
Echarts常用配置项及解释
前端·javascript·echarts