Vue-tables-2 options.hiddenColumns 不工作

Question

我不明白为什么 hiddenColumns 选项不起作用。当我将它设置为 hiddenColumns:['name'] 时，我仍然可以看到 name 列...我已经尝试了最新版本，但问题仍然存在。

编辑

我想默认隐藏 name 列，但用户可以使用 columnsDropdown 取消隐藏它。所以我不能只将它从 columns 数组中删除。

<script>
        new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data: {
                product_list_url: "{% url "api:product-list" %}?source__user_eshop={{ user.get_current_eshop.id }}",
                columns: ['is_active','code', 'name',  'category_full_text', 'brand', 'manufacturer', 'import_price', 'export_price', 'import_export_price_diff', 'on_stock', 'quantity',],
                options: {
                    perPage: 25,
                    perPageValues: [],
                    default: '-',
                    headings: {
                        code: 'Kód',
                        name: 'Názov',
                        on_stock: 'Na sklade',
                        quantity: 'Počet (sklad)',
                        import_price: 'Cena (zdroj)',
                        {#export_price: 'Cena (export)',#}
                        is_active: 'Zobraziť v exporte',
                        category_full_text: 'Kategória',
                        import_export_price_diff: 'Navýšenie',
                        manufacturer: 'Výrobca',
                        brand: 'Značka',
                    },
                    sortIcon: {
                        base: 'fa float-right',
                        is: 'fa-sort',
                        up: 'fa-sort-up',
                        down: 'fa-sort-down'
                    },
                    filterByColumn: true,
                    filterable: ['code', 'name', 'on_stock', 'category_full_text', 'manufacturer', 'brand'],
                    pagination: false,
                    listColumns: {
                        on_stock: [{
                            id: 'true',
                            text: 'Áno',
                        }, {
                            id: 'false',
                            text: 'Nie',
                        },
                        ]
                    },
                    sortable: ['name', 'code', 'quantity', 'import_price', 'category_full_text', 'manufacturer', 'brand'],
                    requestFunction: tablesRequestFunction,
                    responseAdapter: tablesResponseAdapter,

                    templates: {
                        on_stock: 'boolean',
                        is_active: 'boolean',
                        name: 'vue-tables-2-product',
                    },
                    columnsDropdown:true,
                    hiddenColumns:['name'],
                    texts: {
                        count: "Zobrazujem {from} - {to} z {count} záznamov|{count} záznamov|Jeden záznam",
                        first: 'Prvá',
                        last: 'Posledná',
                        filter: "Filter:",
                        filterPlaceholder: "Vyhladať",
                        limit: "Záznamy:",
                        page: "Strana:",
                        noResults: "Nenašli sa žiadne záznamy",
                        filterBy: "Filtrovať",
                        loading: 'Načítavanie...',
                        defaultOption: 'Vyberte {column}',
                        columns: 'Stĺpce'
                    },
                },
            },
            mounted() {
            },
            methods: {
                loading: function (id) {
                    // Animate loader off screen
                    $("#" + id).show();
                },
                onLoaded: function (id) {
                    $("#" + id).hide();
                },
                displayPrice: function (price, suffix) {
                    if (price !== null) {
                        return price + ' ' + suffix;
                    }
                },
                displayDiffPrice: function (price, suffix) {
                    if (price !== null) {
                        if (price < 0) {
                            return this.displayPrice(price, suffix);
                        } else if (price > 0) {
                            return '+' + this.displayPrice(price, suffix);
                        }
                    }
                },
                diffPriceStyle: function (price) {
                    var color = null;
                    if (!((price === null) || (price === 0))) {
                        if (price < 0) {
                            color = 'red';
                        } else if (price > 0) {
                            color = 'green';
                        }
                    }
                    return {color: color}
                }
            },
        })

    </script>

我运行没主意了。你有吗？

Answer 1

如果您使用的版本早于 2019 年 11 月，它基于 matfish2 last post 在此 GitHub issue 上无法正常工作。我遇到了同样的问题，但使用最新版本对我有用。

Vue-tables-2 options.hiddenColumns 不工作

Vue-tables-2 options.hiddenColumns doesn't work

javascript

html

vue.js

vue-tables-2