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