Shulou(Shulou.com)05/31 Report--

This article mainly introduces "vue+elementUI how to configure the column display and hiding of the table". In the daily operation, I believe that many people have doubts about how to configure the column display and hiding of the table in vue+elementUI. The editor consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how to configure the column of the vue+elementUI table to show and hide". Next, please follow the editor to study!

Description:

When there are too many columns in the table, you can control the display and hiding of the columns as needed. Currently, Vue+elementUI (Element Plus adapted to Vue3) is used. The specific effect and code are as follows:

Effect picture:

Complete code:

Choose to display the field date, name, province, urban address, zip code, cancel Make sure to view and edit export default {data () {return {visible: false TableData: [{date: "2016-05-02", name: "Wang Xiaohu", province: "Shanghai", city: "Putuo District", address: "1518 Lane, Jinshajiang Road, Putuo District, Shanghai", zip: 200333,}, {date: "2016-05-04" Name: "Wang Xiaohu", province: "Shanghai", city: "Putuo District", address: "1517 Lane, Jinshajiang Road, Putuo District, Shanghai", zip: 200333,}, {date: "2016-05-01", name: "Wang Xiaohu", province: "Shanghai" City: "Putuo District", address: "1519 Lane, Jinshajiang Road, Putuo District, Shanghai", zip: 200333,}, {date: "2016-05-03", name: "Wang Xiaohu", province: "Shanghai", city: "Putuo District" Address: "1516 Lane, Jinshajiang Road, Putuo District, Shanghai", zip: 200333,},], / / the configuration object of the column Storage configuration information showColumn: {date: true, name: true, provinces: true, city: true, adreess: true, zipCode: true,},} }, mounted () {/ / request the name of the showColumnInitData column if (localStorage.getItem ("columnSet")) {this.showColumn = JSON.parse (localStorage.getItem ("columnSet"))} else {this.showColumn = {date: true, name: true, provinces: true, city: true, adreess: true, zipCode: true,} }, methods: {handleClick (row) {console.log (row);}, saveColumn () {localStorage.setItem ("columnSet", JSON.stringify (this.showColumn)) this.visible = false;},},}; / * Control fade effect * / .fade-enter-active,.fade-leave-active {transition: opacity 0.3s;} .fade-enter,.fade-leave-to {opacity: 0 }

Question:

1. It can be easily implemented, but the best way is that all the fields of the column are also implemented through configuration

2. When the popover of elementUI is nested in table, the display bug of the panel will appear. For example, this article uses: visible= "visible". If you follow the normal bi-directional binding of vMuthModelvisble = "visible", the pop-up window will flash and will be closed immediately after pop-up.

Phenomenon:

Reason conjecture:

VmurModeluvisble = "visible" automatically triggers the shutdown of the mask layer and changes visible to false (watch listens to visible, and when you click the pop-up button, visible becomes true and immediately becomes false)

3. If a column sets the minWidth property, and if the column is hidden, popover will pop up two windows, such as the address column:

Therefore, dialog can be used to achieve:

View, edit, select, display field date, name, province, urban address, zip code, delete

Effect:

At this point, the study on "how to configure the column display and hiding of the table in vue+elementUI" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.