在element-ui中el-tree算是稍微复杂点儿的了，这里简单记录一些
闲话不说了，直接附上代码?
template相关：?
<el-tree
ref="myTree"
v-loading="loading"
:data="treeData"
:props="{
children: 'children',
label: 'regionName',
}"
node-key="id"
highlight-current
default-expand-all
:expand-on-click-node="false"
@node-click="nodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button
type="text"
class="tree-item-button"
icon="el-icon-plus"
@click.stop="() => addChindTreeNode(data)"
></el-button>
<el-button
type="text"
class="tree-item-button"
icon="el-icon-edit-outline"
@click.stop="() => editTreeNode(data)"
></el-button>
<el-button
type="text"
class="tree-item-button"
icon="el-icon-view"
@click.stop="() => viewTreeNode(data)"
></el-button>
<el-button
v-if="data.level != 0"
type="text"
class="tree-item-button"
icon="el-icon-delete"
@click.stop="() => delTreeNode(data)"
></el-button>
</span>
</span>
</el-tree>script相关 ：
// 区域树状结构
getRegionTree() {
this.loading = true;
regionTree().then(({ data }) => {
if (data && data.data.length) {
this.treeData = data.data;
// 默认选中第一条的最里层的
const o = this.getDefaultObj(this.treeData);
this.currRegionLevel = o.level;
this.currRegionParentCode = o.parentCode;
this.currRegionId = o.id;
this.$nextTick(() => {
this.$refs.myTree.setCurrentKey(o.id);
});
}
this.loading = false;
});
},
// 递归获取第一条中最里层的
getDefaultObj(tree) {
let o;
let firstObj = tree[0] || {};
if (firstObj.children && firstObj.children.length) {
o = this.getDefaultObj(firstObj.children);
} else {
o = firstObj;
}
return o;
},
// 新增下级树节点
addChindTreeNode(data) {
//console.log(data, 'data---->>>')
this.$refs.TreeForm.init("addChild", "", data);
},
// 修改树节点
editTreeNode(data) {
//console.log(data, 'data---->>>')
this.$refs.TreeForm.init("edit", data.id, data);
},
// 查看树节点
viewTreeNode(data) {
//console.log(data, 'data---->>>')
this.$refs.TreeForm.init("view", data.id, data);
},
// 删除数据节点
delTreeNode(data) {
this.$confirm(`确定删除所选项吗?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.loading = true;
delReionInfo(data.id).then(({ data }) => {
if (data && data.data) {
this.$message.success("操作成功");
this.getRegionTree();
}
this.loading = false;
});
});
},
// 树形节点被点击时的回调
nodeClick(data) {
this.currRegionLevel = data.level; //当前选中的区域等级
this.currRegionId = data.id; // 当前选中的区域ID
this.currRegionParentCode = data.parentCode; // 当前选中的
// 接下来就是点击之后要做些什么事儿
},css设置选中的节点的样式
我这个是写在全局的样式，如果是在组件里面，前面要加上 /deep/ 或者 ::v-deep做个样式穿透才行?
// 移入树形
.el-tree-node__content:hover {
background: rgba(0, 229, 255, 0.3) !important;
}
// 选中当前node的样式
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background: rgba(0, 229, 255, 0.5)!important;
color: red!important;
}效果?
注意：?
?el-tree官网还有个current-node-key这个属性，这个只能在最初的时候（也就是写死的默认值）才可以设置上，但实际项目中会从后台拿到数据之后再去设置，这时候我们会this.currNodeKey = data.xxx；这样你会发现设置不上，也算是一个坑吧
所以我们要采用上面的方式：
①?highlight-current（属性）
②?setCurrentKey（方法）
这两个才是关键代码
还有我上次也写了一篇关于el-tree的，可以勾选的相关?，也罢链接附上吧