Elementui el |
您所在的位置：网站首页 › element按钮设置右边 › Elementui el |
Elementui el
|
el-tree的使用
默认展开某节点默认选中左侧导航某节点默认关闭所有展开节点（不展开任何节点）去除子节点缩进自定义节点内容、设置某一节点对应的背景色三角图标右移/收缩、展开样式改变完整代码和效果图
默认展开某节点
设置node-key="id" :default-expanded-keys="nodeKey" nodeKey是数组，传入要展开节点对应的id this.nodeKey.push(data[0].id); 默认选中左侧导航某节点node-key="id" :default-expanded-keys="nodeKey" 设置setCurrentKey，传入要选择节点的id this.$nextTick(() => { this.$refs.tree.setCurrentKey(this.nodeKey[0]) }) 默认关闭所有展开节点（不展开任何节点）应用场景：点击某一按钮，关闭所有已展开节点。 通过ref找到节点的store属性获取所有节点的集合数组nodesMap for(let key in this.$refs.tree.store.nodesMap) { this.$refs.tree.store.nodesMap[key].expanded = false } 去除子节点缩进 设置:indent="0" 自定义节点内容、设置某一节点对应的背景色 使用slot，找到要修改内容对应的class，（F12查找）例如下面例子 el-tree-node、custom-tree-node，找到这些elementui自带的class，使用插槽进行修改。我这里主要想在标题右侧显示对应的条数和设置某个节点的背景颜色，slot完美解决。使用slot，可以自己设置各种图标、怎么显示等问题！！超级好用呜呜呜 {{ node.label}} {{data.dataNum}} {{ node.label}} {{data.dataNum}} 三角图标右移/收缩、展开样式改变 >>>.el-tree-node__expand-icon { position: absolute; right: 2%; } 完整代码和效果图 数据主题 {{countData}} {{ node.label}} {{data.dataNum}} {{ node.label}} {{data.dataNum}} //此处省略写 data: [{ label: '一级 1', children: [{ label: '二级 1-1' }] }, { label: '一级 2', children: [{ label: '二级 2-1' }, { label: '二级 2-2' }] }, { label: '一级 3', children: [{ label: '二级 3-1' }, { label: '二级 3-2' }] }], defaultProps: { children: 'children', label: 'label' } .asset-catalogue-nav { margin-top: 10px; /* 小三角图标右移 */ >>>.el-tree-node__expand-icon { position: absolute; right: 2%; font-size: 18px; } // 鼠标hover悬浮背景色 >>>.el-tree-node__content{ display: block; //默认使用flex布局 此处需要设置父标题背景颜色因此改为block height: 40px; line-height: 40px; &:hover{ color: #1067EE; background-color: #F6F7FB; } } /* 点击树结构项的选中颜色 */ >>> .el-tree-node.is-current>.el-tree-node__content { color: #1067EE; background-color: #F6F7FB; } /* 拖拽时失焦节点颜色 */ >>> .el-tree-node:focus > .el-tree-node__content { color: #063972 ; background-color: #F5F5F5; } /* 三角图标 收缩 */ >>> .el-tree-node__content>.el-tree-node__expand-icon { margin-top: 5px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* 三角图标 展开 */ >>> .el-tree-node__content>.el-tree-node__expand-icon.expanded { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } .data-theme { background-color:#F6F7FB; color: #1067EE; font-size: 20px; height: 40px; line-height: 40px; padding-right: 10px; border-radius: 3px 3px 0px 0px; }
后续开辟什么新领域再继续补充(╹▽╹) |
【本文地址】
今日新闻 |
推荐新闻 |