BootstrapVue таблица-шаблон внутри слота Vue - PullRequest
Новая
       28

BootstrapVue таблица-шаблон внутри слота Vue

0 голосов
/ 26 июня 2018

Я хочу создать родительский компонент для таблицы начальной загрузки с настраиваемым отображением данных (шаблоны).

Прямо сейчас это выглядит примерно так: 

<b-table
     :items="result"
     :fields="fields"
     :current-page="currentPage"
     :per-page="perPage">
    <template slot="Index" slot-scope="data">
        {{ data.index + 1 }}
    </template>
    <!-- more templates for various columns here -->
</b-table>
<b-pagination 
     align="center" 
     :total-rows="result.length" 
     v-model="currentPage" 
     :per-page="perPage"
/>

Причина, по которой я хочу обернуть это в компоненте, заключается в том, что я использую этот макет таблицы, включая нумерацию страниц и все ее атрибуты (например, полосатый, с рамками и т. Д.), Несколько раз.

Единственное, что меняется, это шаблоны-столбцы.

Я знаю, Vue способ сделать это - создать слот, такой как <slot name="x"></slot>, и заполнить его <template slot="x">...</template>. С одной стороны, это совпадало бы с bootstrap-vue template, а с другой стороны, bootstrap-vue, похоже, правильно отображает шаблоны, только если они помещены прямо в b-table.

По сути, я хочу достичь такого компонента: 

<b-table>
    <slot name="templates"/>
</b-table>
<b-pagination stuff.../>

И используйте его в дочернем компоненте так: 

<TemplateTable>
    <template slot="templates">
        <template slot="Index" slot-scope="data">
            {{ data.index + 1 }}
        </template>
        <!-- more templates -->
    </template>
</TableTemplate>

Кто-нибудь сделал что-то подобное и нашел способ решить это?

1 Ответ

0 голосов
/ 26 сентября 2018

Вы можете использовать функцию рендеринга компонента для передачи слотов и scopedSlots другому компоненту (например, b-table).Но тогда вы не можете использовать шаблон.Чтобы у вас был шаблон (с разбиением на страницы, поиском и т. Д.), Вы можете заключить компонент рендеринга в другой компонент, у которого есть шаблон.Итак, у вас будет компонент custom-table, который содержит нумерацию страниц и компонент table-wrapper, а компонент table-wrapper будет отображать b-table.

Вот очень конкретный пример .. 

const constItems = [{
    index: 0,
    isActive: true,
    age: 40,
    first_name: 'Dickerson',
    last_name: 'Macdonald'
  },
  {
    index: 1,
    isActive: false,
    age: 21,
    first_name: 'Larsen',
    last_name: 'Shaw'
  },
  {
    index: 2,
    isActive: false,
    age: 89,
    first_name: 'Geneva',
    last_name: 'Wilson'
  },
  {
    index: 3,
    isActive: true,
    age: 38,
    first_name: 'Jami',
    last_name: 'Carney'
  }
];

const bTableProps = {
  items: {
    type: [Array, Function],
    default: undefined
  },
  fields: {
    type: [Object, Array],
    default: undefined
  }
};

const constFields = [
  'index',
  'isActive',
  'age',
  'first_name',
  'last_name'
];

Vue.component('table-wrapper', {
  props: Object.assign({}, bTableProps),
  render(h) {
    return h('b-table', {
      props: this.$props,
      slots: this.$parent.$slots,
      scopedSlots: this.$parent.$scopedSlots,
      on: {
        'row-clicked': (item, index, event) => alert('clicked ' + index)
      }
    });
  }
});

Vue.component('custom-table', {
  template: '<div><h3>hello table</h3><table-wrapper :items="items" :fields="fields"></table-wrapper></div>',
  props: Object.assign({}, bTableProps)
});

new Vue({
  el: "#app",
  data: {
    items: constItems,
    fields: constFields
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.js"></script>

<div id="app">
  <custom-table :items="items" :fields="fields">
    <template slot="index" slot-scope="data">
			{{ data.index + 1 }}
		</template>
  </custom-table>
  <custom-table :items="items" :fields="fields">
    <template slot="index" slot-scope="data">
			{{ data.index + 2 }}
		</template>
  </custom-table>
  <custom-table :items="items" :fields="fields">
    <template slot="index" slot-scope="data">
			{{ data.index + 3 }}
		</template>
  </custom-table>
</div>
...