С bootstrap - vue без горизонтальной прокрутки - PullRequest
Новая
       12

С bootstrap - vue без горизонтальной прокрутки

0 голосов
/ 18 января 2020

С bootstrap - vue: 2.1 Я реализовал таблицы с большим количеством столбцов и хотел сделать прокрутку столбцов, но потерпел неудачу с такой страницей, как: 

<template>

    <b-card >


        <b-card-body class="">


            <b-card-title class="mb-2">
                <h4>You can control users in system</h4>
            </b-card-title>

            <div>
            <b-table
                    responsive="true"
                    stacked="false"
                    :items="users"
                    :fields="usersFields"
                    :per-page="0"
                    :current-page="current_page"
            >
                <template v-slot:cell(id)="data">
                    <div class="text-right">{{ data.value }}</div>
                </template>

                <template v-slot:cell(name)="data">
                    <div class="text-left admin_table_cell">{{ data.value }}</div>
                </template>

                <template v-slot:cell(status)="data">
                    <div class="text-left admin_table_cell">{{ getDictionaryLabel( data.value, userStatusLabels ) }}</div>
                </template>

                <template v-slot:cell(permission_text)="data">
                    <div class="text-left admin_table_cell">{{ data.value }}</div>
                </template>

                <template v-slot:cell(email)="data">
                    <div class="text-left admin_table_cell">{{ data.value }}</div>
                </template>

                <template v-slot:cell(actions)="data">
                    <div class="text-center admin_table_cell">
                        <router-link :to="{name: 'adminUserEditor', params: {id: data.item.id}}" :class="'p-1 a_edit_item_'+data.item.id">
                            <i :class="'i_link '+getHeaderIcon('edit')" title="Edit user"></i>
                        </router-link>

                        <a v-on:click="removeUser(data.item.id, data.item.name, index)" :class="'p-1 a_delete_item_'+data.id">
                            <i :class="'fa fa-trash'"></i>
                        </a>
                    </div>
                </template>

            </b-table>
            </div>

            <b-pagination
                    v-model="current_page"
                    :total-rows="users_total_count"
                    :per-page="per_page"
                    aria-controls="my-table"
            ></b-pagination>


        </b-card-body>
    </b-card>


</template>

<script>

    import Vue from 'vue'
    import VueResource from 'vue-resource'

    Vue.use(VueResource)

    import appMixin from '@/appMixin';

    import {settingCredentialsConfig, settingsJsMomentDatetimeFormat, settingsUserStatusLabels} from '@/app.settings.js'

    export default {
        data() {
            return {
                users: [],
                users_total_count: 0,
                usersFields: [
                    'id',
                    {key: 'name', sortable: false},
                    {key: 'email', sortable: false},
                    {key: 'status', sortable: false},
                    {key: 'first_name', sortable: false},
                    {key: 'last_name', sortable: false},
                    {key: 'phone', sortable: false},
                    {key: 'website', sortable: false},

                    {key: 'permission_text', label: 'Permissions'},
                    'actions',
                ],
                current_page: 1,
                per_page: 2,
                filter_name: '',
                order_by: 'created_at',
                order_direction: 'desc',

            }
        },

        name: 'usersAdminListingPage',
        mixins: [appMixin],

        mounted() {
            this.loadUsers()
        }, // mounted() {
        ...


    }
</script>

Установка свойства 

responsive="true"

Я ожидал, что автоматическая прокрутка будет прокручиваться, но не получилось, и у меня весь дизайн страницы поврежден и сдвинут влево-вправо.

Какой правильный способ автоматической прокрутки по горизонтали?

1 Ответ

2 голосов
/ 20 января 2020

реквизиты responsive и stacked являются логическими реквизитами (обратите внимание, что они также могут принимать имена точек останова строки), и вы передаете им строковые значения "true" (например, строку 'true').

Итак, вы должны сделать: 

<b-table :responsive="true" :stacked="false" ... >
  <!-- ... --->
</b-table>

Или просто просто следующее: 

<b-table responsive ... >
  <!-- ... --->
</b-table>

Примечание stacked по умолчанию false, если не указано.

...