网站开发应财务如何记账,网站城市跳转怎么做,网站建设需放在哪个科目,百度权重10的网站饿了么树形组件的图标自定义
默认样式: 可以看到el-tree组件左侧自带展开与收起图标,咱们可以把它隐藏::
.groupList {::v-deep .el-tree-node { .el-icon-caret-right {display: none;} }
} 我的全部代码 div classgroupListel…饿了么树形组件的图标自定义
默认样式: 可以看到el-tree组件左侧自带展开与收起图标,咱们可以把它隐藏::
.groupList {::v-deep .el-tree-node { .el-icon-caret-right {display: none;} }
} 我的全部代码 div classgroupListel-tree :datagroupList node-keyid :default-expanded-keysdefaultexpande:highlight-currenttrue :propsdefaultProps node-drophandleDrop draggable:allow-dropallowDrop :allow-dragallowDrag node-clicktoogleForm reftreespan slot-scope{ data } classspan__ stylepadding-left:6px;span :classdata.icon stylemargin-right:10px;/spanel-tooltip effectdark placementtop :visible-arrowfalse :open-delay500:enterablefalsediv slotcontent v-htmldata.fullName/divspan classtree-node-spanstylecolor:black;{{ data.fullName |Formatstr(7)}}/span/el-tooltipspan classrightButton2span classiconfont icon-more-grid-big/span/span/span/el-tree/div
其中自定义左侧图标的方法: 我的每条数据都自带icon属性,你没有的话也可以在数据拿到之后手动遍历添加一条icon属性进去,然后再el-tree中使用: span :classdata.icon stylemargin-right:10px;/span
如果需要点击改变图标的话就点击改变data中的icon属性即可。 但是先确认是否已经定义好icon对应的图标.
鼠标悬停显示图标:
span classrightButton2 span classiconfont icon-more-grid-big/span/span/span
css
将右侧图标默认隐藏,悬停显示即可
.groupList{::v-deep .el-tree-node {.el-tree-node__content { .rightButton2{visibility: hidden;}:hover .rightButton2 {visibility: visible;}}}
} 【el-tree】树形结构拖拽,修改分组https://blog.csdn.net/weixin_64530670/article/details/132372128
