el-table动态增加列、行数据，俩种方法实现按需选择

需求：

表格数据过多的时候，需要实现动态选择数据的功能，有俩种方法可以按需选择，解决了表格动态选择时闪屏数据抖动问题。

注意，这个添加数据是tableData原本就有的，我做的这个操作类似就是折叠选择展示原有的数据

1.实现表格数据居中

2.动态添加内容

3.解决表格添加数据后闪屏功能

4.解决了el-dropdown-menu点击后自动关闭问题

1.效果1

使用了el-dropdown嵌套el-checkbox-group实现

2.效果2

使用了el-select的多选实现

3.主要代码讲解

:hide-on-click="false"：点击菜单后不隐藏菜单

  
                             地址 
                            
                                
                                    
                                        
                                    
                                
                            
                        

3.1:添加数据后窗口抖动解决代码

1.在el-table添加ref='table'

2.每次数据加载完重新渲染表格

    beforeUpdate() {
        this.$nextTick(() => {
            //在数据加载完，重新渲染表格
            this.$refs['table'].doLayout();
        });
    }

3.2 数据筛选

根据选择值进行数据筛选，之后再和原有数据进行比对，最后把数据添加到表格数据中实现

   selectOptions(val) {
            console.log(val, '数据');
            this.tableFilter = [];
            let filter = this.options.filter((item) => val.includes(item.label));
            // let filter = this.options.filter((item) => val.includes(item.value));
            console.log(filter, '多选数据');
            filter.forEach((item) => {
                this.tableFilter.push({
                    prop: item.value,
                    label: item.label
                });
            });
        }

4.效果1完整代码

5.效果2完整代码