当需要对element-ui组件懒加载进行拓展功能,如添加查看更多或者其他图标进行加载,可使用下面的方法进行调整使用
- 加载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>
- 当前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>