溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下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" >
{{ 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);
}
},以上就是“el-tree樹怎么設置懶加載及設置默認勾選”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
