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

最新推荐文章于 2025-09-09 09:56:19 发布

原创最新推荐文章于 2025-09-09 09:56:19 发布 · 2.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #vue.js #javascript

本文介绍了如何在Vue2应用中安装并使用MathJax插件，实现表格中的物理公式渲染，包括全局注册、私有组件使用和在表格列中插入公式的方法。

该文章已生成可运行项目，

现有需求为将实验数据录入表格中,需要表格呈现物理公式,使用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>