建站出海mvc网站开发 案例视频
目录
- 一、代码实现
- 1. 属性了解 （[更多](https://element.eleme.cn/#/zh-CN/component/tree)）
- 2. 实现步骤
- 3.代码示例
- 二、 效果图
一、代码实现
1. 属性了解 （更多）
- node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 String
- current-node-key 当前选中的节点 string, number
- expand-on-click-node 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 boolean — true
- default-expand-all 是否默认展开所有节点 boolean — false
- highlight-current 是否高亮当前选中节点，默认值是 false。 boolean — false
- check-on-click-node 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 boolean — false
2. 实现步骤
-
设置一个固定值 node-key=“id”, 根据实际项目配置唯一的标记
-
定义当前选中节点 :current-node-key=“currentDeptId”
-
设置highlight-current为true
-
设置current-node-key为currentDeptId，同时刷新接口时重新设置currentDeptId，代码如下
this.$nextTick(() => {this.$refs['tree'].setCurrentKey(this.currentDeptId); })3.代码示例
1.html部分
<el-tree :data="deptOptions" :props="defaultProps" node-key="id" :expand-on-click-node="false"ref="tree" default-expand-all highlight-current @node-click="handleNodeClick":current-node-key="currentDeptId" :check-on-click-node="true"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }} </span></span></el-tree>- js部分：
// 部门树选项deptOptions: undefined,// 配置选项defaultProps: {children: "children",label: "label",},//默认选中的部门currentDeptId: null, // 比如：107currentDeptName: null, methods: {// 节点单击事件handleNodeClick(data) {console.log(data, '节点单击事件')this.currentDeptId = data.idthis.currentDeptName = data.label},}根据实际需要，在刷新下拉树的时候，这个currentDeptId，需要重置。（以便在刷新后，保留刷新前的选中状态）
/** 查询下拉树结构 */getTreeselect() {deptTreeselect({}).then((response) => {this.deptOptions = response.data;// 设置highlight-current为true// 设置current-node-key为currentDeptId，同时刷新接口时重新设置currentDeptId，新后保留展开状态功能的实现 ，代码如下// 设置选中this.$nextTick(() => {this.$refs["tree"].setCurrentKey(this.currentDeptId);});});},- css部分
<style scoped> /* 鼠标hover改变背景颜色 *//deep/ .el-tree-node .el-tree-node__content:hover {background-color: #f0f7ff !important;color: #409eff;}/* 颜色高亮 *//deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {color: #409eff;} </style>二、 效果图
