el-tree 为绑定数据添加新属性(页面展示图标)
<template>
<div>
<div class="user__tree boxsty">
<avue-tree :option="treeOption" :data="treeData" @node-click="getNodeData">
<span class="el-tree-node__label" slot-scope="{ node, data }">
<el-tooltip class="item" effect="dark" content="无数据权限" placement="right-start" v-if="data.isLock">
<span>{{ node.label }} <i class="el-icon-lock"></i></span>
</el-tooltip>
<span v-if="!data.isLock">
<span v-if="data.isRecord">{{ node.label }} <i class="el-icon-check"></i></span>
<span v-else>{{ node.label }}</span>
</span>
</span>
</avue-tree>
</div>
<el-tree :data="treeList" :props="defaultProps" @node-click="handleNodeClick" node-key="id">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button type="text" size="mini" @click="() => append(data)">Append</el-button>
<el-button type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
</span>
</span>
</el-tree>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.data1);
this.treeList = this.getNewArray(this.data1);
console.log(this.treeList)
},
data() {
return {
defaultProps: {
children: 'children',
label: 'label'
},
treeList:[]
,
data1: [{
label: '一级 1',
children:[{
label: '二级 2-1',
children: []
},
]
}
],
data: [{
label: '一级 1',
children: [
{
label: '二级 2-1',
children: [{
label: '三级 2-1-3-1',
children:[]
}]
},
{
label: '二级 2-2',
children: [{
label: '三级 2-2-1',
children:[]
}]
},
]
}
],
};
},
methods: {
append(data){
console.log(data);
}
,
remove(node, data){
console.log(node);
}
,
handleNodeClick(data,node,compons) {
// console.log(data);
//
console.log(data);
console.log(node);
console.log(compons);
},
//为树形结构data添加属性
getNewArray(vData){
let nStr= [];
for(let i=0; i<vData.length ;i++){
if(vData[i].children.length === 0){
nStr.push({
label: vData[i].label,
isRecord: true,
children: vData[i].children,
id: Math.ceil(Math.random()*10000000)
})
}
else {
nStr.push({
label: vData[i].label,
isRecord: true,
children: this.getNewArray(vData[i].children),
id: Math.ceil(Math.random()*10000000)
})
}
}
return nStr;
}
}
}
</script>
<style scoped>
</style>
择善人而交,择善书而读,择善言而听,择善行而从。