el-tree 前端过滤，懒加载,动态控制、默认展开，树节点排序

1. 默认不展开，动态展开。

2. 默认展开属性用:default-expanded-keys="array" array为默认展开节点key的数组。

<el-input placeholder="请输入搜索内容" v-model="filterText" class="inputStyle" clearable> </el-input>

<el-tree

ref="tree"

:key="treeKey"

:data="treeData"

node-key="id"

:filter-node-method="filterNode"

ref="dimTree"

:props="treeDataDefaultProp"

icon-class="el-icon-arrow-right"

@node-click="handleClick"

:load="loadNode"

lazy

:default-expand-all="isExpand"

></el-tree>

data(){

return {

filterText: '',

}

}

watch: {

// 树节点的过滤

filterText(val) {

this.keyword = val

this.getTreeData()

if (val) {

// 动态展开

this.isExpand = true;

// 重置使之重新加载

this.treeKey = +new Date();

}

// 回调更新后的数据，再渲染

this.$nextTick(() => {

this.$refs.tree.filter(val);

}

}

methods：{

filterNode(value, data) {

if (!value) return true;

const node = data.lable.toLowerCase();

return node.indexOf(value.toLowerCase()) !== -1;

},

handleClick(data, node) {

}

}

// 递归遍历排序子节点

sortTree(treeNode) {

const list = treeNode;

if (treeNode.length) {

for (const node of list) {

const nodeList = node.children || []

if (nodeList.length) {

const orderList = nodeList.sort((a, b) => {

return a.name.toLowerCase() - b.name.toLowerCase()

});

node.childern = orderList;

for (const nodeChildren of nodeList) {

const nodeChildrenList = nodeChildern.childern || [];

if (nodeChildrenList.length) {

// 参数为数组

this.sortTree([nodeChildren]);

}

}

}

}

}

}