Me gustaría mostrar y ocultar la columna de la tabla de forma dinámica con la casilla de verificación y guardar la opción de localstore en vue 2. Encuentro una versión de jquery pero cuando intenté usarla no funcionó. Soy un principiante en vue. Gracias por tu ayuda.
Mi tabla 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, }, } },me quedo sin ideas Gracias por tu ayuda.
Para esto, debe establecer los valores predeterminados para que los valores de la casilla de verificación primero intenten leer desde localStorage. Luego, cree un método cuando se haga clic en la entrada para cambiar el valor y actualizar el conjunto de valores en el almacenamiento.
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>