現(xiàn)有需求為 將實(shí)驗(yàn)數(shù)據(jù)錄入表格中,需要表格呈現(xiàn)物理公式,使用Mathjax在vue2中 進(jìn)行呈現(xiàn)

1.安裝

npm i --save mathjax-vue

2.全局注冊(cè)(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'
// 必須先執(zhí)行過(guò)initMathJax
export default {
  ...
  components: {
    MathJax,
  },
  ...
}

?不想插入組件

// 必須先執(zhí)行過(guò)initMathJax
import { renderByMathjax } from 'mathjax-vue'

renderByMathjax(document.getElementById('id1'))

在表格中如何使用

<template>
  <!--測(cè) 信號(hào)電壓及頻率 表-->
  <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: '待測(cè)信號(hào)'
      }, {
        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:渲染公式 需要先拿到對(duì)應(yīng)的DOM元素

Mathjax語(yǔ)法總結(jié)

使用MathJax 3 渲染數(shù)學(xué)公式及在Vue中的使用

MathJax基本的使用方式文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-816929.html

到了這里，關(guān)于vue項(xiàng)目前端展示數(shù)學(xué)公式(在表格中渲染)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！