The vue elementUI table controls how hidden corresponding columns are displayed

This article mainly introduces the "vue elementUI table control how to show hidden corresponding column" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, hope that this "vue elementUI table control how to show hidden corresponding column" article can help you solve the problem.

Requirements: the backend returns all column data. The front end displays the corresponding columns according to the options. If not checked, all the columns are hidden by default.

Effect picture

Show the corresponding columns when checked

Upper code

Html part

Here, v-if is used to show hiding. Because of this elementul component, v-show does not take effect, so use v-if.

Data part

Ispass is used to control whether it is shown or hidden, and label is used to judge.

Lists: [{label:'Upper',ispass:false}, {label:'Lower',ispass:false}, {label:'UP+LO',ispass:false}, {label:'Static',ispass:false}, {label:'LRO-T1 OA',ispass:false}, {label:'LRO-T2 OA',ispass:false}, {label:'LRO-B1 OA',ispass:false} {label:'LRO-B2 OA',ispass:false}, {label:'RRO-C OA',ispass:false}, {label:'LRO-T1 Buige',ispass:false}, {label:'LRO-T2 Buige',ispass:false}, {label:'LRO-B1 Buige',ispass:false}, {label:'LRO-B2 Buige',ispass:false} {label:'LRO-T1 Dent',ispass:false}, {label:'LRO-T2 Dent',ispass:false}, {label:'LRO-B1 Dent',ispass:false}, {label:'LRO-B2 Dent',ispass:false},], check: ["Upper", "Lower", "UP+LO", "Static" "LRO-T1 OA", "LRO-T2 OA", "LRO-B1 OA", "LRO-B2 OA", "RRO-C OA", "LRO-T1 Buige", "LRO-T2 Buige", "LRO-B1 Buige", "LRO-B2 Buige", "LRO-T1 Dent", "LRO-T2 Dent", "LRO-B1 Dent" "LRO-B2 Dent",], checkList: []

Method part

Just listen with watch and copy it. Pay attention to checkList and check here

CheckList: represents the default selection of your multi-check boxes. If I don't write it, I will not select all of them by default.

Check: this should be written in the same way as label in lists, which is used to judge.

Watch: {checkList (newVal) {if (newVal) {var arr = this.check.filter (I = > newVal.indexOf (I)

< 0) //未选中 this.lists.map(i =>

{if (arr.indexOf (i.label)! =-1) {i.ispass = false} else {i.ispass = true}, so much for "vue elementUI table controls how hidden corresponding columns are displayed". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.