Vue-pivottable 限制菜单项

问题描述

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

<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,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',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','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>

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

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

如何实现？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）