服务器上 网站,成都摄影网站建设,营销型网站框架图,百度地图下载2022新版安装目录 一、代码实现1. 属性了解 #xff08;[更多](https://element.eleme.cn/#/zh-CN/component/tree)#xff09;2. 实现步骤3.代码示例 二、 效果图 一、代码实现
1. 属性了解 #xff08;更多#xff09;
node-key 每个树节点用来作为唯一标识的属性#xff0c;整棵树… 目录 一、代码实现1. 属性了解 [更多](https://element.eleme.cn/#/zh-CN/component/tree)2. 实现步骤3.代码示例 二、 效果图 一、代码实现
1. 属性了解 更多
node-key 每个树节点用来作为唯一标识的属性整棵树应该是唯一的 Stringcurrent-node-key 当前选中的节点 string, numberexpand-on-click-node 是否在点击节点的时候展开或者收缩节点 默认值为 true如果为 false则只有点箭头图标的时候才会展开或者收缩节点。 boolean — truedefault-expand-all 是否默认展开所有节点 boolean — falsehighlight-current 是否高亮当前选中节点默认值是 false。 boolean — falsecheck-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 :datadeptOptions :propsdefaultProps node-keyid :expand-on-click-nodefalsereftree default-expand-all highlight-current node-clickhandleNodeClick:current-node-keycurrentDeptId :check-on-click-nodetruespan classcustom-tree-node slot-scope{ node, data }span{{ node.label }} /span/span/el-treejs部分 // 部门树选项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二、 效果图
