使用 bootstrap-vue 不会自动滚动

Question

使用 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"

我希望自动滚动，但失败了，所有页面设计都被破坏了并左右移动。

使 hor 自动滚动的有效方法是什么？

Answer 1

道具 responsive 和 stacked 是布尔道具（注意它们也可以接受字符串断点名称），并且您正在向它们传递字符串 "true" 值（例如字符串'true').

所以你应该这样做：

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

或者只是以下内容：

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

注意 stacked 如果未指定则默认为 false。

使用 bootstrap-vue 不会自动滚动

With bootstrap-vue no hor scrolling automatically

responsive-design

bootstrap-vue