el-tree树设置懒加载以及设置默认勾选方式
作者：骑上我心爱的小摩托
这篇文章主要介绍了el-tree树设置懒加载以及设置默认勾选方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
el-tree树设置懒加载以及设置默认勾选
当需要对element-ui组件懒加载进行拓展功能，如添加查看更多或者其他图标进行加载，可使用下面的方法进行调整使用
1.加载tree树时，要求能够通过点击查看更多进行懒加载，且可进行勾选复选框获取数据，由于界面存在多个Tree树，故命名多个ref值传递进来子组件Tree树内
<DsmasTreeLoadMore
ref="dataStructure"
:show-checkbox="true"
:bind-ref="{label: '结构化数据',id: 'dataStructure'}"
/>
<script>
import DsmasTreeLoadMore from '@/views/components/dsmas-tree-loadmore';
export default {
components: {
DsmasTreeLoadMore
}
data(){
return{
defaultProps: {
label: 'label',
children: 'children',
isLeaf: 'leaf'
},
pageNumber: 1,
pageSize: 10,
complete: false,
defaultCheckedKeys: [],
treeData: {
dataStructure: [
{
label: '结构化数据',
id: 'dataStructure',
children: [],
disabled: true
}
],
dataUnstructure: [
{
label: '非结构化数据',
id: 'dataUnstructure',
children: [],
disabled: true
}
],
collapse:false
}
},
created() {
this.getTreeLoadmore();
},
methods: {
// 查看更多按钮
loadmore() {
++this.pageNumber;
this.getTreeLoadmore();
},
async getTreeLoadmore() {
let ref = this.bindRef.id; let resultData = ''; let treeData = [];
if (ref === 'dataStructure') {
resultData = await getDistributeDatasource({pageNumber: this.pageNumber, pageSize: this.pageSize, structured: true});
treeData = resultData.data.items.map(({id, name: label}) => {
return {id, label};
});
} else if (ref === 'dataUnstructure') {
resultData = await getDistributeDatasource({pageNumber: this.pageNumber, pageSize: this.pageSize, structured: false});
treeData = resultData.data.items.map(({id, name: label}) => {
return {id, label};
});
}
this.treeData[ref][0].children = this.treeData[ref][0].children.concat(treeData);
// 初次加载选定前十存储与查询数据
let storage = this.getStorageMethod(this.bindRef.id); let setChecked = [];
if (storage) {
setChecked = storage;
} else {
setChecked = treeData.map(({id}) => {
return id;
});
}
this.$nextTick(() => {
this.$refs[ref].setCheckedKeys(setChecked);
});
this.defaultCheckedKeys = setChecked;
// 数据加载完毕
if (this.treeData[ref][0].children.length >= resultData.data.total) {
this.complete = true;
}
},
// 取出当前ref对应缓存
getStorageMethod(ref) {
let paramObj = getStorage('distribute');
if (paramObj) {
if (ref === 'dataStructure' && paramObj.dataStructure) {
return paramObj.dataStructure;
} else if (ref === 'dataUnstructure' && paramObj.dataUnstructure) {
return paramObj.dataUnstructure;
}
}
},
// 勾选接口聚合
handleCheck(data, checked) {
let checkedNode = this.$refs[this.bindRef.id].getNode(data.id).checked;
let storage = this.getStorageMethod(this.bindRef.id);
if (storage) {
if (checkedNode) {
storage.push(data.id);
} else {
storage.splice(storage.findIndex(item => item === data.id), 1);
}
} else {
storage = checked.checkedKeys;
}
this.defaultCheckedKeys = storage;
this.$refs[this.bindRef.id].setCheckedKeys(storage);
this.$forceUpdate();
let storageFormal = getStorage('distribute');
storageFormal[this.bindRef.id] = storage;
setStorage('distribute', storageFormal);
},
// 节点展开
handleNodeExpand() {
this.collapse = true;
},
// 节点关闭
handleNodeCollapse() {
this.collapse = false;
// 剔除当前节点所有子节点 过滤节点是关闭当前节点且是其子级，则不予赋值
// this.defaultExpandKeys = this.defaultExpandKeys.filter((x) => (![data.id].some((item) => x === item) && !(x.indexOf(data.id) > -1)));
},
handleNodeClick(node) {
this.$emit('handleNodeClick', {id: node.id, label: node.label});
}
}
</script>
2.当前Tree树，默认是两层结构，所以不需要用到loadmore原生方法，这里直接拼接数据，查询接口数据为第二层数据传入，当前，当翻入到第二页时，默认第二页未勾选，当用户进行勾选时不影响翻页效果
<div class="tree-load">
<el-tree
:ref="bindRef.id"
class="treeDom"
:data="treeData[bindRef.id]"
default-expand-all
show-checkbox
node-key="id"
:expand-on-click-node="false"
:default-checked-keys="defaultCheckedKeys"
:props="defaultProps"
@node-expand="handleNodeExpand"
@node-collapse="handleNodeCollapse"
@check="handleCheck"
>
<div slot-scope="{ node,data }" class="custom-tree-node">
<el-tooltip
class="item"
effect="light"
placement="right-start"
>
<div slot="content" style="max-width: 300px;">
{{ node.label }}
</div>
<span v-if="data.id !=='loadmore'" class="span-tree-node">{{ node.label }}</span>
</el-tooltip>
</div>
</el-tree>
<el-link
v-if="!complete && collapse"
:underline="false"
class="tree-more"
@click="loadmore"
>
查看更多
</el-link>
</div>
vue el-tree树的懒加载实现
样式1：
首先加载第一层树节点(要有加载第一层节点的接口才ok)
样式2：
当点击第一层节点，或者其他层父节点的时候，加载其子节点，形成一个懒加载的效果。
代码实现：
重要的是在tree中设置
:load=“loadNode”
lazy
<el-tree
:data="treeData"
node-key="id"
:filter-node-method="filterNode"
ref="indexTree"
:props="treeDataDefaultProp"
:expand-on-click-node="false"
class="tree_Style"
:load="loadNode"
lazy
>
</el-tree>
created() {
this.init();
},
methods: {
// 初始化第一层树
init() {
this.getTreeData();
},
// 得到第一层树的列表
async getTreeData() {
const param = {
type: Number(this.cateTabActive),
keyword: this.keyword
};
const res = await this.$api.get('/api/category', param);
if (res.code == 200) {
// treeData 就是树绑定的数据
this.treeData = res.info;
} else {
return false;
}
},
// 树的懒加载
loadNode(node, reslove) {
let that = this;
if (node.level === 0) {
reslove(that.treeData);
}
if (node.level >= 1) {
this.loadNodeChildren(node, reslove);
}
},
// 树的懒加载获取子节点
async loadNodeChildren(node, reslove) {
let param = {
categoryId: node.data.id,
type: Number(this.cateTabActive)
};
const res = await this.$api.get('/api/category', param);
let resArr = [];
if (res.code === 200) {
res.info.forEach(item => {
item = JSON.parse(JSON.stringify(item));
resArr.push({
name: item.name,
id: item.id,
leaf: item.leaf,
parentCategoryId: item.parentCategoryId,
currentLevel: item.currentLevel,
relateCount: item.relateCount
});
});
// 将得到的孩子列表，塞进树中
this.$refs.indexTree.updateKeyChildren(node.data.id, resArr);
return reslove(res.info);
}
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。