切换显示/隐藏表列并保存到 vue 中的本地存储答案

【问题标题】：toggle show/hide table column and save to localstorage in vue切换显示/隐藏表列并保存到 vue 中的本地存储
【发布时间】：2022-01-02 13:05:42
【问题描述】：

我想使用复选框动态显示和隐藏表列，并将其保存到 vue 2 中的 localstore 选项。我找到了一个 jquery 版本，但是当我尝试使用它时它不起作用。我是vue的初学者。感谢您的帮助。

我的 vue 表：

    export default {
    extends: axiosGetPost,
    props: ['id','tab_name', 'route_name'],
    data() {
        return {
            hidePreLoader: true,
            price: '',
            purchase_price: '',
            selling_price: '',
            products: {},
            tableOptions: {
                tableName: 'products',
                columnSelect : true,
                columns: [
                    {
                        title: 'lang.item_image',
                        key: 'image',
                        type: 'images',
                        source: '/uploads/products',
                        imagefield: 'imageURL',
                        sortable: false
                    },
                    {title: 'lang.sku', key: 'sku', type: 'text', sortable: true},
                    {title: 'lang.sku_2', key: 'sku_2', type: 'text', sortable: true},
                    {title: 'lang.sku_3', key: 'sku_3', type: 'text', sortable: true},
                    {title: 'lang.sku_4', key: 'sku_4', type: 'text', sortable: true},
                    {title: 'lang.attribute_values', key: 'attribute_values', type: 'text', sortable: true},
                    {title: 'lang.quantity', key: 'test', type: 'text', sortable: true},
                    {title: 'lang.selling_price', key: 'selling_price', type: 'text', sortable: true},
                    {title: 'lang.receiving_price', key: 'purchase_price', type: 'text', sortable: true},
                ],
                formatting : ['selling_price','purchase_price'],
                source: '/products/variantDetails/' + this.id,
            },
        }
    },

我的想法已经用完了。感谢您的帮助。

【问题讨论】：

标签： javascript vue.js vuejs2 show-hide vue-tables-2

【解决方案1】：

为此，您需要设置默认值，以便复选框值首先尝试从 localStorage 读取。然后在点击输入时创建一个方法来改变值并将值集更新到存储中。

Vue.use(VueTables.ClientTable);

new Vue({
    el: "#app",
    data: {
        columns: ['name', 'code'],
        columnHidden: {
            name: localStorage.getItem('name') || false,
            code: localStorage.getItem('code') || false
        },
        data: getData()
    },
    methods: {
        toggleColumn(column) {
            this.columnHidden[column] = !this.columnHidden[column];
            localStorage.setItem(column, true);
        }
    }
});

function getData() {
    return [{
        code: "ZW",
        name: "Zimbabwe"
    }, {
        code: "ZM",
        name: "Zambia"
    }, {
        code: "YE",
        name: "Yemen"
    }];
}

<div id="app" v-cloak>
  <template v-for="column in columns">
    <label for=`toggleTable${column}`>{{`Toggle ${column}`}}</label>
    <input v-on:click="toggleColumn(column)" id=`toggleTable${column}` type="checkbox" :checked="columnHidden[column]" />
    <br />
  </template>

  <v-client-table :columns="columns" v-model="data">
  </v-client-table>
</div>

【讨论】：