element-ui框架的知识点总结

来源：互联网发布：哪个软件可以群发短信编辑：程序博客网时间：2024/06/05 14:57

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布局

阅读全文

0 0