ag-grid FrameworkКомпоненты с Vuetify - PullRequest
Новая
       53

ag-grid FrameworkКомпоненты с Vuetify

1 голос
/ 22 января 2020

Я использую: "ag-grid-community": "^ 21.2.2", "ag-grid-enterprise": "^ 21.2.2", "ag-grid- vue": "^ 21.2 .2 "," vue ":" ^ 2.6.10 "," vuetify ":" ^ 1.5.16 "

Если у вас есть G-Grid с компонентом каркаса (Vue) внутри На вкладке vuetify вы получите следующую ошибку. Не удалось найти компонент с именем "TradeCellRenderer". Это в Vue .components?

Этот код выдает вышеуказанную ошибку: 

 <v-tabs>
  <v-tab>Find</v-tab>
  <v-tab-item>
    <ag-grid-vue
      id="findGrid"
      style="width: 100%; height: 85vh;"
      class="ag-theme-balham"
      :gridOptions="findGridOptions"
      :columnDefs="findGridColumnDefs"
      :defaultColDef="findGridDefaultColDef"
      @grid-ready="getDocuments"
      @selection-changed="gridOnSelectionChanged"
      :rowSelection="findGridRowSelection"
      :rowData="findGridRowData"
      :floatingFilter="true"
      :frameworkComponents="frameworkComponents"
    ></ag-grid-vue>
  </v-tab-item>
</v-tabs>

Без вкладки Vuetify все работает нормально? 

        <ag-grid-vue
      id="findGrid"
      style="width: 100%; height: 85vh;"
      class="ag-theme-balham"
      :gridOptions="findGridOptions"
      :columnDefs="findGridColumnDefs"
      :defaultColDef="findGridDefaultColDef"
      @grid-ready="getDocuments"
      @selection-changed="gridOnSelectionChanged"
      :rowSelection="findGridRowSelection"
      :rowData="findGridRowData"
      :floatingFilter="true"
      :frameworkComponents="frameworkComponents"
    ></ag-grid-vue>

Единственное отличие состоит в том, что когда сетка находится внутри вкладки Vuetify, она не работает (cellRendererFramework), когда вы помещаете сетку за пределы вкладки, она работает нормально.

Если у кого-то еще возникнет эта проблема, есть ли причина для этого?

1 Ответ

1 голос
/ 02 марта 2020

Это мое уродливое исправление, для меня это решает временно. Найдите следующий файл: ag-grid-vue / lib / VueComponentFactory. js Добавьте / замените код ниже, из этого уродливого кода видно, в чем проблема. компонент не находится в родительском элементе, родительский компонент обычно является компонентом vuetify, поэтому, если я его не найду, я посмотрю дальше и продолжу, пока не буду уверен, что везде искал компонент. Позже я отправлю электронное письмо в ag-grid, чтобы узнать, что я делаю не так или это ошибка.

Но этот код должен решить вашу проблему. 

    VueComponentFactory.getComponentType = function(parent, component) {
    if (typeof component === 'string') {
        var componentInstance = parent.$parent.$options.components[component];
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            componentInstance = parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$options.components[component];
        }
        if (!componentInstance) {
            console.error("Could not find component with name of " + component + ". Is it in Vue.components?");
            return null;
        }
        return Vue.extend(componentInstance);
    } else {
        // assume a type
        return component;
    }
};
...