How to dynamically control the display and hiding of table columns by Vue

This article introduces the knowledge of "how to dynamically control the display and hiding of table columns by Vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The effect is as shown in the figure:

The header title is repeated in order to see the scrolling effect

VMuif = "lists [0] .ispass" to determine whether each column of the table shows or hides. Check the box to show, uncheck, hide, and default check.

/ / the function is that too much data makes the overall height of the form data fixed and the extra areas can be pulled down and displayed.

Lists is all header headings, check is the default selection of multiple check boxes, and checkList is also bound to all heading headings.

Data () {return {check: ['coding', 'name', 'update time'], checkList: ['coding', 'name', 'update time'], lists: [{label:' coding', ispass:true}, {label:' name', ispass:true}, {label:' update time', ispass:true},] }}

The option selected by the dynamic monitoring value

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

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

{if (arr.indexOf (i.label)! =-1) {i.ispass = false} else {i.ispass = true}, "how to dynamically control the display and hiding of table columns by Vue" ends here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!