vue2.0中计算属性带参数、对像数组删除属性等的一些操作

计算属性带参数及删除列的操作。

obj是一个对像数组，原来的数据是直接绑定到el-table上的，但是ECharts中用不了那么多的列，这时就需要使用计算属性来删除一些列了。

fileterStr是一个字符串，其实就是要删除的列，用"|"号来分割的，以便于转换成数组。

this.$delete(item,f[i]);就是用来删除对像中指定keys的内容，这里用了一个for，用来删除每一行中的指定keys

    computed:{
        //对像转换成数据，供ECharts使用
        dataText:function(){
            return function(obj,filterStr){
                var mainData=[];
                var f=[];
                if(filterStr.length>0){
                    f=filterStr.split('|');
                }
                if(obj.length>0){
                    var item=obj[0];
                    if(f.length>0){
                        for(var i=0;i<f.length;i++){
                            this.$delete(item,f[i]);
                        }
                    }
                    mainData.push(Object.keys(item));
                }
                for (var i=0;i<obj.length;i++){
                    var item=obj[i];
                    if(f.length>0){
                        for(var j=0;j<f.length;j++){
                            this.$delete(item,f[j]);
                        }
                    }
                    mainData.push(Object.values(item));
                }
                console.log(mainData);
                return mainData;
            }
            
        },

 注意一下：

后来发现使用Object.keys(item)有坑，虽然方便，但是经它处理过的数据顺序都乱了，就是说列的顺序乱了，不是按照原来的列来输出了，这肯定不行。

想想还是用传统的方法吧，我们先实现一个功能，就是第二个参数做为数据列输出的顺序，如果有内容，则按指定的顺序列输出，并过滤掉没有指定的列数据，比如说原来数据有10列，你只指定了3列，那么就显示出来三列。如果参数为空，则按数据原有的顺序原样输出，不做更改。

显示指定列数据

修改后的代码如下，适用于已经知道列名称的情况下使用，对于行列转置动态生成的列，我们后面再说。

    computed:{
        //对像转换成数据，供ECharts使用,如果FilterStr有内容，则按指定的顺序生成数据，如果没有，则按原始的顺序生成数据
        dataText:function(){
            return function(obj,filterStr){
                var mainData=[];
                var f=[];
                if(filterStr.length>0){
                    f=filterStr.split('|');
                }
                // if(obj.length>0){
                //     var item=obj[0];
                //     if(f.length>0){
                //         for(var i=0;i<f.length;i++){
                //             this.$delete(item,f[i]);
                //         }
                //     }
                //     mainData.push(Object.keys(item));
                // }
                // for (var i=0;i<obj.length;i++){
                //     var item=obj[i];
                //     if(f.length>0){
                //         for(var j=0;j<f.length;j++){
                //             this.$delete(item,f[j]);
                //         }
                //     }
                //     mainData.push(Object.values(item));
                // }

                //如果filterstr参数有内容，则使用指定的顺序来生成数据
                if(filterStr.length>0){
                    mainData.push(f);  //标题列
                    for (var i=0;i<obj.length;i++){
                        var item=obj[i];
                        var subitem=[];
                        for(var j=0;j<f.length;j++){
                            for(var key in item){
                                if(f[j]==key){//进行过滤
                                    subitem.push(item[key]);
                                }
                            }
                        }
                        mainData.push(subitem)
                    }
                }else{
                //如果参数没有内容，则按原顺序生成数据
                    var titleitem=[];
                    for(var key in obj[0]){
                        titleitem.push(key);
                    }
                    mainData.push(titleitem);//标题列

                    for(var i=0;i<obj.length;i++){
                        var item=obj[i];
                        var subitem=[];
                        for(var key in item){
                            subitem.push(item[key]);
                        }
                        mainData.push(subitem)
                    }

                }
                console.log(mainData);
                return mainData;
            }
            
        },