现有需求为 将实验数据录入表格中,需要表格呈现物理公式,使用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中的使用文章来源:https://www.toymoban.com/news/detail-816929.html
MathJax基本的使用方式文章来源地址https://www.toymoban.com/news/detail-816929.html
到了这里,关于vue项目前端展示数学公式(在表格中渲染)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!