小程序设计网站,青岛市建设网站,叫人开发网站注意事项,wordpress怎么seo好前言 tree树结构是在开发中经常使用的组件#xff0c;比如区域树#xff0c;楼层树#xff0c;组织架构树#xff0c;等等包含节点关系 实际开发可能需要我们一进到页面选中树形结构第一个节点#xff0c;并且调用数据#xff0c;来达到用户体验 在用户选择之后#x…前言 tree树结构是在开发中经常使用的组件比如区域树楼层树组织架构树等等包含节点关系 实际开发可能需要我们一进到页面选中树形结构第一个节点并且调用数据来达到用户体验 在用户选择之后通过本地存储的方式把楼层id存起来刷新之后获取楼层id调用数据 或者为了用体验我们需要在选中同时高亮在状态保持之后把绑定楼层id节点高亮提示用户 万变不离其宗基于文档介绍和HTML结构代码。我们可以通过2种办法实现
第一种-利用默认点击选中会增加类名 当我们打开浏览器检查会发现当树节点点击之后。会在该节点添加一个类名 当我们配置好树形结构唯一值默认选中数组ref之后我们可以通过在获取楼层数据之后赋值再通过侦听器来侦听当察觉默认数组复制之后就通过document找到这个类名点击它就会默认选中第一个 注意使用this.$nextTick避免出现层级问题 缺点不管传入什么值-只会选中第一个。应为是点击还会触发树结构自带的收缩
案例代码如下-可直接复制
templatediv classbox!-- default-checked-key-默认勾选的节点的 key 的数组 --el-treerefmyTreenode-keyid:datadata:propsdefaultProps:default-checked-keyscheckedkeys/el-tree/div
/templatescript
export default {data() {return {// 树形结构数据data: [{id: 0p150,name: 深圳QQQQ科技有限公司,children: [{id: 12070579,name: 一楼,parentId: 0,orderNum: null,},{id: 12075624,name: 二楼,parentId: 0,orderNum: null,},],},{id: 0p151,name: wertw,children: [],},{id: 0p152,name: qqqqq,children: [{id: 120725697,name: 一楼,parentId: 0,orderNum: null,},{id: 1207236195,name: 二楼,parentId: 0,orderNum: null,},],},{id: 0p154,name: 1231,children: [],},{id: 0p155,name: 123,children: [],},{id: 0p156,name: 123123,children: [],},],// 树形结构数据配置defaultProps: {id: id,label: name,children: children,},//checkedkeys: [],};},// 侦听器watch: {checkedkeys: {// immediate: true,handler: function (newVal, oldVal) {if (newVal) {this.$nextTick(() {// tree树结构点击会加上下面这个类名// 如果默认全部展开-那就会关闭document.querySelector(.el-tree-node__content).click();});}},},},mounted() {// 使用$nextTick 等页面加载完毕之后-在选中防止加载顺序问题this.$nextTick(function () {// 通过ref找到树节点// 通过树结构设置node-key// 结果-选中第一个this.checkedkeys.push(this.data[0].id);// 结果固定id-选中第一个// this.checkedkeys.push(0p150);// 结果-子集选中第一个// this.checkedkeys.push(12070579);// 节点key 结果选中第一个// this.checkedkeys.push([0p150, 12070579]);});
// 结论不管传入什么只会通过侦听器选中树结构第一个},
};
/script
style langscss scoped
// 点击选中颜色
/style
第二种方法-通过高亮属性tree提供api-推荐 当我们配置好树结构唯一值高亮当前节点属性ref之后 我们在获取属性结构数据地方取第一个数据id传入api就可以高连当前节点 注意使用this.$nextTick避免出现层级问题 优点只需要树形结构唯一值id传入api就可以实现选中树形结构任意节点并且高亮-符合实际开发
案例代码如下-可直接复制
templatediv classbox!-- default-expand-all-展开全部 --!-- highlight-current- 是否高亮当前选中节点 --el-treerefmyTreenode-keyid:datadata:propsdefaultPropshighlight-currentdefault-expand-all/el-tree/div
/templatescript
export default {data() {return {// 树形结构数据data: [{id: 0p150,name: 深圳QQQQ科技有限公司,children: [{id: 12070579,name: 一楼,parentId: 0,orderNum: null,},{id: 12075624,name: 二楼,parentId: 0,orderNum: null,},],},{id: 0p151,name: wertw,children: [],},{id: 0p152,name: qqqqq,children: [{id: 120725697,name: 一楼,parentId: 0,orderNum: null,},{id: 1207236195,name: 二楼,parentId: 0,orderNum: null,},],},{id: 0p154,name: 1231,children: [],},{id: 0p155,name: 123,children: [],},{id: 0p156,name: 123123,children: [],},],// 树形结构数据配置defaultProps: {id: id,label: name,children: children,},};},mounted() {// 使用$nextTick 等页面加载完毕之后-在选中防止加载顺序问题this.$nextTick(function () {// 通过ref找到树节点// 通过树结构设置node-key通过唯一id来高亮节点// setCurrentKey-通过 key 设置某个节点的当前选中状态使用此方法必须设置 node-key 属性// 这行不会选中this.$refs.myTree.setCurrentKey(this.data[0].id);// 这行会生效this.$refs.myTree.setCurrentKey(this.data[0].children[0].id);});},
};
/script
style langscss scoped
// 设置高亮颜色
::v-deep.el-tree--highlight-current.el-tree-node.is-current .el-tree-node__content {background-color: #baf !important;
}
/style 总结
经过这一趟流程下来相信你也对 element-tree树结构-默认选中第一个节点高亮-根据id选中节点高亮 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 什么不足的地方请大家指出谢谢 -- 風过无痕
