javascript - Vue-pivottable 限制菜单项

Question

我正在测试 vue-pivottable 并且已经能够使用以下链接为我们的数据重新创建它演示https://github.com/nicolaskruchten/pivottable，但在图表的下拉选择中，我想将其限制为只有四个。我尝试将rendererName属性添加到排除项，但没有奏效，下面是代码。

<template>
   <div class="card m-3">
      <div class="card-header">
        <h2 align="left">pivottable</h2>
        </div>
      <div class="card-body">
        <vue-pivottable-ui
            v-model="config"
            :data="data"
            :localeStrings="localeStrings[locale]"
            :rendererName="rendererName"
            :aggregatorName="aggregatorName"
            :tableColorScaleGenerator="colorScaleGenerator"
            :attributes="attributes"
            :valueFilter="valueFilter"
            :rows="rows"
            :cols="cols"
            :vals="vals"
            :disabledFromDragDrop="disabledFromDragDrop"
            :sortonlyFromDragDrop="sortonlyFromDragDrop"
            :hiddenFromDragDrop="hiddenFromDragDrop"
            :sorters="sorters"
            rowOrder="value_a_to_z"
        >
          <colgroup slot="colGroup">
            <col :width="300">
            <col>
          </colgroup>
          <div v-if="loading" slot="output">
            loading...
          </div>
          <template v-if="!loading" slot="output" slot-scope="{ pivotData }">
            {{ pivotData }}
          </template>
          <template slot="pvtAttr" slot-scope="{ name }">
            {{ name }}
          </template>
        </vue-pivottable-ui>
        </div>
     </div>
</template>

<script>
// import tips from '/json/tips'
// import tips2 from './tips2'
import { PivotUtilities, VuePivottableUi, Renderer } from 'vue-pivottable'
// import { VuePivottableUi, PivotUtilities, Renderer } from '../../../src'
// import { VuePivottable, PivotUtilities, Renderer } from '../../../src'
import 'vue-pivottable/dist/vue-pivottable.css'
import { scaleLinear } from 'd3-scale'
export default {
  components: {
    VuePivottableUi
    // VuePivottable
  },
  name: 'app',
  data () {
    return {
      // fix issue #27
      valueFilter: {
        Meal: {
          Dinner: true
        }
      },
      config: {},
      filteredData: [],
      data: [
        'Meal': 'Lunch', 
        'Payer Smoker': 'yes', 
        'Day of Week': 1, 
        'Payer Gender': 'Male', 
        'Party Size': ''
      ],
      attributes: ['Unused 1', 'Meal', 'Payer Smoker', 'Day of Week', 'Payer Gender', 'Party Size'],     
      rows: ['Platform', 'Tractor model'],
      cols: ['Location', 'Implement'],
      vals: ['Total'],
      disabledFromDragDrop: [], // ['Payer Gender'],
      hiddenFromDragDrop: [],
      sortonlyFromDragDrop: [], // ['Party Size'],
      // pivotColumns: ['Meal', 'Payer Smoker', 'Day of Week', 'Payer Gender', 'Party Size'],
      loading: false,
      aggregatorName: 'Sum',
      rendererName: 'Table',
      exclusions: {
        rendererName: {
          'Grouped Column Chart': 'Grouped Column Chart',
          'Stacked Column Chart': 'Stacked Column Chart',
          'Grouped Bar Chart': 'Grouped Bar Chart',
          'Stacked Bar Chart': 'Stacked Bar Chart',
          'Line Chart': 'Line Chart',
          'Dot Chart': 'Dot Chart',
          'Area Chart': 'Area Chart',
          'Scatter Chart': 'Scatter Chart',
          'Multiple Pie Chart': 'Multiple Pie Chart'
        }
      },
      localeStrings: {
        en: {
          renderError: 'An error occurred rendering the PivotTable results.',
          computeError: 'An error occurred computing the PivotTable results.',
          uiRenderError: 'An error occurred rendering the PivotTable UI.',
          selectAll: 'Select All',
          selectNone: 'Select None',
          tooMany: 'too many values to show',
          filterResults: 'Filter values',
          totals: 'Totals',
          only: 'only',
          rendererNames: {
            Table: 'Table',
            'Table Heatmap': 'Table Heatmap',
            'Table Col Heatmap': 'Table Col Heatmap',
            'Table Row Heatmap': 'Table Row Heatmap',
            'Export Table TSV': 'Export Table TSV' // ,
            /*'Grouped Column Chart': 'Grouped Column Chart',
            'Stacked Column Chart': 'Stacked Column Chart',
            'Grouped Bar Chart': 'Grouped Bar Chart',
            'Stacked Bar Chart': 'Stacked Bar Chart',
            'Line Chart': 'Line Chart',
            'Dot Chart': 'Dot Chart',
            'Area Chart': 'Area Chart',
            'Scatter Chart': 'Scatter Chart',
            'Multiple Pie Chart': 'Multiple Pie Chart'*/
          }
        }
      },
      locale: 'en'
    }
  },
  created () {
    setTimeout(() => {
      // this.data = tips
    }, 1000)
  },
  computed: {
    sorters () {
      return {
        'Day of Week': PivotUtilities.sortAs(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'])
      }
    },
    unusedAttrs () {
      return this.config.unusedAttrs
    },

    renderers () {
      const TableRenderer = Renderer.TableRenderer
      // const PlotlyRenderer = Renderer.PlotlyRenderer
      return (() => ({
            'Table': TableRenderer.Table,
            'Table Heatmap': TableRenderer['Table Heatmap'],
            'Table Col Heatmap': TableRenderer['Table Col Heatmap'],
            'Table Row Heatmap': TableRenderer['Table Row Heatmap'],
            'Export Table TSV': TableRenderer['Export Table TSV']
          })
      )()
    }
  },
  methods: {
    colorScaleGenerator (values) {
      const scale = scaleLinear()
          .domain([0, Math.max.apply(null, values)])
          .range(['#fff', '#77f'])
      return x => {
        return { 'background-color': scale(x) }
      }
    }
  },
  watch: {
    config: {
      handler (value) {
        const PivotData = PivotUtilities.PivotData
        this.filteredData = new PivotData(value).getFilteredData()
      },
      deep: true,
      immediate: false
    }
  }
}
</script>

<style>
.main {
  max-width: 980px;
  margin: 8vh auto 20px;
}
.title {
  text-align: center;
  margin-bottom: 20px;
}
h1 {
  margin-bottom: 0px;
}
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}
pre {
  text-align: left;
  background-color: #f8f8f8;
  padding: 1.2em 1.4em;
  line-height: 1.5em;
  margin: 60px 0 0;
  overflow: auto;
}
code {
  padding: 0;
  margin: 0;
}
footer {
  text-align: center;
  margin-top: 40px;
  line-height: 2;
}
</style>

在下面的下拉列表中，只需要显示前四个项目。

也想在聚合器列表中限制相同

如何实现？

标签： javascriptvue.jsdrop-down-menuvue-componentpivottable.js