vue项目前端展示数学公式(在表格中渲染)

现有需求为 将实验数据录入表格中,需要表格呈现物理公式,使用Mathjax在vue2中 进行呈现

1.安装

npm i --save mathjax-vue

2.全局注册(main.js中)

import MathJax, { initMathJax, renderByMathjax } from 'mathjax-vue'function onMathJaxReady() {const el = document.getElementById('elementId');renderByMathjax(el).then(r => {});
}initMathJax({}, onMathJaxReady)// vue 2
Vue.use(MathJax)// vue3
createApp(App).use(MathJax)

  私有组件 

import { MathJax } from 'mathjax-vue'
// 必须先执行过initMathJax
export default {...components: {MathJax,},...
}

 不想插入组件

// 必须先执行过initMathJax
import { renderByMathjax } from 'mathjax-vue'renderByMathjax(document.getElementById('id1'))

在表格中如何使用

<template><!--测 信号电压及频率 表--><div><el-table :data="tableData" border><template v-for="(item, index)  in tableHeader"><el-table-column :key="item.key" :label="item.label" :prop="item.key" align="center" show-overflow-tooltip><template slot-scope="scope" slot="header"><div class="mathjaxDom">{{ item.label }}</div></template><template slot-scope="scope"><div>{{scope.row[item.key]}}</div></template></el-table-column></template></el-table></div>
</template>
<script>
import {renderByMathjax} from 'mathjax-vue';
import {log} from "video.js";export default {data() {return {tableHeader: [{key: 'signal',label: '待测信号'}, {key: 'MD',label: 'm(div)'},{key: 'Dy',label: `$\{D_y}(V/div)$`},{key: 'ND',label: 'n(div)'},{key: 'Dt',label: `$\{D_t}(s/div)$`},{key: 'Vp',label: `$\{V_p}=\{D_y}m(V)$`},{key: 'T',label: `$T=\{D_t}n(Hz)$`},],tableData: [{signal: '2V,50Hz', MD: '1', Dy: '2',ND:'3',Dt:'4',Vp:'5',T:'6' },{signal: '4V,1000Hz', MD: '1', Dy: '2',ND:'3',Dt:'4',Vp:'5',T:'6' },]}},mounted() {this.renderFormula();},methods: {// 填充公式renderFormula() {this.$nextTick(() => {renderByMathjax(document.getElementsByClassName('mathjaxDom'))});},}
}
</script><style lang="less" scoped></style>

 ps:渲染公式 需要先拿到对应的DOM元素

Mathjax语法总结

使用MathJax 3 渲染数学公式及在Vue中的使用

MathJax基本的使用方式