目录el-tree树设置懒加载以及设置默认勾选Vue el-tree树的懒加载实现总结el-tree树设置懒加载以及设置默认勾选 当需要对element-ui组件懒加载进行拓展功能,
当需要对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>
样式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);
}
},
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: el-tree树设置懒加载以及设置默认勾选方式
本文链接: https://www.lsjlt.com/news/210995.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0