el-table multi-table switching multi-selection box display bug

I wrote a function today, click the tree on the left to make a judgment, the first-level tree node displays the system page, the second-level tree node displays the database page, and the third-level tree node displays the table page.

There are two el-tables on the database page and the table page respectively, the upper one has no multi-selection boxes, and the lower one has multiple selection boxes

 Now there is a bug, when clicking on the tree node, the code:

// click on the node

    nodeClick(data) {

      if(data.type == "datasource" || data.type == "table" || data.type == "compony"){

        this.tableType = data.type;

        if(this.tableType == "compony"){

          this.getComponyInfo(data)

        }

        if(this.tableType == "datasource"){

          this.sourceTableTableQuery.datasourceId = data.id

          this.getDatasourceInfo(data.id)

        }

        if(this.tableType == "table"){

          this.sourceTableColumnQuery.datasourceId = data.datasourceId

          this.sourceTableColumnQuery.tableName = data.label

          this.getTableInfo(data)

        }

      }

    },

Switch between datasource (library page) and table (table page), the multi-selection box will be on the top for a while, and the bottom will be for a while,

 The solution is to add :key="Math.random()" or :key="1" :key="2" to the table with multiple selection boxes.

Remember to add to all tables with multiple checkboxes, or to all tables. Adding a key is a good thing, and it can run quickly

I also found that only one of the forms with multiple selection boxes was added and this bug appeared again. In the code, only the multiple selection boxes were written for the following form.

 

Guess you like

Origin blog.csdn.net/qq_57420582/article/details/132354557