Vue数据透视表标签

Question

我想将标签添加到Vue中的数据透视表中，如下面的屏幕截图所示，我想可以通过向元素中注入HTML来做到这一点，但这会导致数组索引的混乱。因此，拖放功能将无法使用。这有可能吗？

有没有更好的方法可以实施呢？

可以找到JSFiddle here

<script src=//unpkg.com/vue></script>
<script src=//unpkg.com/vue-pivottable@0.3.62/dist/vue-pivottable.umd.js></script>
<link rel="stylesheet" href="//unpkg.com/vue-pivottable@0.3.62/dist/vue-pivottable.css">
<div id="app">
        <vue-pivottable-ui
            :data="pivotData"
            :aggregator-name="aggregatorName"
            :renderer-name="rendererName"
            :rows="rows"
            :cols="cols"
            :vals="vals"
            :row-total="true"
            :col-total="true"
        >
        </vue-pivottable-ui>
</div>

window.Vue.use(window['vue-pivottable'])
new Vue({
  el: "#app",
  data: {
      pivotData: [
  ['Total Bill', 'Tip', 'Payer Gender', 'Payer Smoker', 'Day of Week', 'Meal', 'Party Size'],
  [16.99, 1.01, 'Female', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [10.34, 1.66, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 3],
  [21.01, 3.5, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 3],
  [23.68, 3.31, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [24.59, 3.61, 'Female', 'Non-Smoker', 'Sunday', 'Dinner', 4],
  [25.29, 4.71, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 4],
  [8.77, 2, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [26.88, 3.12, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 4],
  [15.04, 1.96, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 2],
  [14.78, 3.23, 'Male', 'Non-Smoker', 'Sunday', 'Dinner', 2],
],
      aggregatorName: 'Sum',
      rendererName: 'Table Heatmap',
      rows: ['Payer Gender'],
      cols: ['Party Size'],
      vals: ['Total Bill'],
  },
  mounted() {
    const pvtUnused = document.getElementsByClassName(
      'pvtAxisContainer pvtUnused pvtHorizList'
    )
    const pvtCols = document.getElementsByClassName(
      'pvtAxisContainer pvtHorizList pvtCols'
    )
    const pvtRows = document.getElementsByClassName(
      'pvtAxisContainer pvtVertList pvtRows'
    )
    if (pvtUnused.length !== 0) {
      pvtUnused[0].insertAdjacentHTML('afterbegin', '<h4>Unused Data</h4>')
    }
    if (pvtCols.length !== 0) {
      pvtCols[0].insertAdjacentHTML('afterbegin', '<h4>Column Data</h4>')
    }
    if (pvtRows.length !== 0) {
      pvtRows[0].insertAdjacentHTML('afterbegin', '<h4>Row Data</h4>')
    }
  },
})