博主另一篇:vue+element tree各項功能代碼詳解
鏈接:https://blog.csdn.net/Hei_lovely_cat/article/details/105763739
一、基礎版
- 效果
- element樹組件
添加了滾動條,樣式參照博主其他博客 。
<el-scrollbar style="height:100%">
<el-tree node-key="id" ref="tree" highlight-current :props="props" :load="loadNode" lazy
:render-content="renderContent" @node-click="handleNodeClick">
</el-tree>
</el-scrollbar>
- 實現數據邏輯
將接口的引用註釋了,並,造了點數據以供參考,照搬就行。
data() {
return {
componyId: "",
props: {
label: "name",
children: [],
isLeaf: "leaf"
}
}
},
-
// 異步樹葉子節點懶加載邏輯 loadNode(node, resolve) { // 一級節點處理 if (node.level == 0) { this.requestTree(resolve); } // 其餘節點處理 if (node.level >= 1) { this.getIndex(node, resolve); } }, // 異步加載葉子節點數據函數 getIndex(node, resolve) { // var param = { // provinceId: node.data.id // }; // var url = "/base/inter"; // this.$ajax // .post(url, param) // .then(out => { var datas = [ { "id": "31", "name": "公司21", 'flag':'2' }, { "id": "32", "name": "公司23", 'flag':'2' }, { "id": "33", "name": "公司23", 'flag':'2' } ] datas.forEach(value => { if (value.flag === '2') { value.leaf = true }else{ value.leaf = false } }) let data = datas; resolve(data); // }) // .catch(error => {}); }, // 首次加載一級節點數據函數 requestTree(resolve) { var datas = [ { "id": "21", "name": "區域21", 'flag':'1' }, { "id": "22", "name": "區域23", 'flag':'1' }, { "id": "23", "name": "區域23", 'flag':'1' } ] datas.forEach(value => { value.leaf = false }) let data = datas; resolve(data); }, //樹-轉換 handleNodeClick(value) { if (value.flag == '2') { this.componyId = value.id; this.getAllList() } }, renderContent: function (h, { node, data, store }) { if (data.flag == '2') { return ( < span > < i class = 'el-icon-office-building' style = "color: #409EFF;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>); } else if (data.flag == '1'){ return ( < span > < i class = 'el-icon-folder-opened' style = "color: #FFB427;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>); } },
注意:樹節點切換時,設置的是父節點不走接口,只有子節點可以;接口返回值返回了當前級別,用來區分圖標!
二、延伸版
- 效果
- element樹組件
<el-tree node-key="id" ref="tree" highlight-current :props="props" :load="loadNode" lazy :render-content="renderContent" @node-click="handleNodeClick"> </el-tree>
- 實現數據邏輯
props: {
label: "name",
children: [],
isLeaf: "leaf"
},
outletId: "",
// 異步樹葉子節點懶加載邏輯
loadNode(node, resolve) {
// 一級節點處理
if (node.level == 0) {
this.requestTree(resolve);
}
// 其餘節點處理
if (node.level >= 1) {
this.getIndex(node, resolve);
}
},
// 異步加載葉子節點數據函數
getIndex(node, resolve) {
//node.data.id
//上級-區域
if(node.data.flag=='1'){
var datas = [{
"id": "31",
"name": "公司21",
'flag':'2'
},
{
"id": "32",
"name": "公司23",
'flag':'2'
},
{
"id": "33",
"name": "公司23",
'flag':'2'
},
{
"id": "34",
"name": "區域34",
'flag':'1'
}
]
datas.forEach(value => {
value.leaf = false
})
let data = datas;
resolve(data);
}
//上級-企業
else if(node.data.flag=='2'){
var datas = [
{
"id": "41",
"name": "排口21",
'pollutionSourceId':'3',
'status':0
},
{
"id": "42",
"name": "排口23",
'pollutionSourceId':'3',
'status':1
},
{
"id": "43",
"name": "排口23",
'pollutionSourceId':'3',
'status':1
}
]
datas.forEach(value => {
if (value.pollutionSourceId != undefined) {
value.leaf = true
}else{
value.leaf = false
}
})
let data = datas;
resolve(data);
}
},
// 首次加載一級節點數據函數
requestTree(resolve) {
var datas = [
{
"id": "21",
"name": "區域21",
'flag':'1'
},
{
"id": "22",
"name": "區域23",
'flag':'1'
},
{
"id": "23",
"name": "區域23",
'flag':'1'
}
]
datas.forEach(value => {
value.leaf = false
})
let data = datas;
resolve(data);
},
//樹-轉換
handleNodeClick(value) {
if (value.pollutionSourceId != undefined) {
this.outletId = value.id;
this.getAllListChange()
}
},
renderContent: function (h, {
node,
data,
store
}) {
if (data.pollutionSourceId != undefined) {
if(data.status == 0){
return ( < div > <el-tag type="success" size="small" class='work-pollution-tree'>運行</el-tag>
<span title={data.name} class = 'style-demo'>{data.name}</span > </div>);
}else if(data.status == 1){
return ( < div > <el-tag type='danger' size="small" class='stop-pollution-tree'>停運</el-tag>
<span title={data.name} class = 'style-demo'>{data.name}</span > </div>);
}
} else{
return ( < span > < i class = 'el-icon-folder-opened'
style = "color: #FFB427;" > </i><span title={data.name} class = 'style-demo'>{data.name}</span > </span>);
}
},