element-ui框架的知识点总结

element-ui框架的知识点总结
1.el-table的减少列
减少第一列，改变源码removeColumn

removeColumn:function(e,t){
var i=e._columns;
i.indexOf(t)!=-1&&i.splice(i.indexOf(t),1),
this.updateColumns(),
this.scheduleLayout()
}

减少第二列

removeColumn:function(e,t){
var i=e._columns;
for(var x=e.fixedColumns.length;x<e._columns.length;x++){
    if(i[x].children){
    i[x].children.indexOf(t)!=-1&&i[x].children.splice(i[x].children.indexOf(t),1);
}else{
    i.indexOf(t)!=-1&&i.splice(i.indexOf(t),1),
    this.updateColumns(),
    this.scheduleLayout()
}

2.el-tree 树的结构 懒加载
html

<el-tree
     :props="props1"
     :load="loadNode1"
     lazy
     highlight-current
     @node-click="nodeClick"
     ref="tree2">
</el-tree>

 loadNode1(node, resolve) {
                    this.yesOrNo=false;
                    if (node.level === 0) {
                        return resolve(treeDataOne);
                    }
                    if(node.level==1){
                        setTimeout(() => {
                            const data = node.data.children;
                        resolve(data);
                        }, 500);
                    }
                    if (node.level> 1){
                        var children=[];
                        if(node.data.data=='district') {
                            HT_Service.Post('/basequery/PostBaseTableDataList', {
                                json: JSON.stringify({
                                    'query_id': 20,
                                    'query_value': node.data.id
                                })
                            }, function (reback) {
                                /**
                                 * 把查询出来的字节点追加到父节点上
                                 */
                                $.each(reback.payload, function (o, item2) {
                                    var html2 = {
                                        id: item2.unitId,
                                        name: item2.name,
                                        parent: true,
                                        data: 'unit'
                                    };
                                    children.push(html2);
                                })
                            }, 'post', false)
                            setTimeout(() => {
                                const data = children;
                            resolve(data);
                        }, 500);
                        }
                        else if(node.data.data=='unit') {
                            HT_Service.Post('/basequery/PostBaseTableDataList', {
                                json: JSON.stringify({
                                    'query_id': 21,
                                    'query_value': node.data.id
                                })
                            }, function (reback) {                        
                                $.each(reback.payload, function (o, item2) {
                                    var html2 = {
                                        id: item2.departId,
                                        name: item2.name,
                                        isParent: true,
                                        parent: true,
                                        data: 'depart'
                                    };
                                    children.push(html2);
                                })
                            }, 'post', false)
                            setTimeout(() => {
                                const data = children;
                            resolve(data);
                        }, 500);
                        }
                        else if(node.data.data=='depart'){
                            setTimeout(() => {
                                const data = node.data.children;
                            resolve(data);
                        }, 500);
                        }

                    }
                }

3.el-row el-col布局