vue elementUI tree 设置默认选中自定义样式

最新推荐文章于 2024-06-05 16:01:17 发布

zkau0518

最新推荐文章于 2024-06-05 16:01:17 发布

阅读量1w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： vue elementUI

本文链接：https://blog.youkuaiyun.com/weixin_39888214/article/details/95166550

vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

elementUI

1 篇文章

订阅专栏

博客提供了ElementUI Tree的链接，展示了相关数据，包含机构简介、组织运行等分类，部分分类还有子项，如信息公开下有登记证书等内容，同时提到了样式自定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【elementUI tree】：https://element.eleme.cn/#/zh-CN/component/tree

<el-tree
  :data="data"
  ref="tree"
  node-key="id"
  :highlight-current="true"
  :current-node-key="0"
  @node-click="getCurrentKey"
  :default-expand-all="true"
></el-tree>
data() {
  return {
    nodekey: "",//node-key
    data: [],//返回数据
    defaultProps: {
      children: "children",
      label: "label"//返回数据中的label，也可以更换其他
    }
  };
},
"data":[{"id":0,"label":"机构简介","categoryId":"0"},{"id":1,"label":"组织运行","categoryId":"1"},{"id":2,"label":"品牌项目—爱飞翔","categoryId":"2"},{"id":3,"label":"品牌项目—爱传递","categoryId":"3"},{"id":4,"label":"所获荣誉","categoryId":"4"},{"id":5,"label":"媒体报道","categoryId":"5"},{"id":6,"label":"视频展示","categoryId":"6"},{"id":7,"label":"信息公开","categoryId":"7","children":[{"id":7001,"label":"登记证书","categoryId":"7001"},{"id":7002,"label":"机构章程","categoryId":"7002"},{"id":7003,"label":"年检报告&财务报告","categoryId":"7003"},{"id":7004,"label":"接受及使用捐赠资助","categoryId":"7004"},{"id":7005,"label":"服务及承诺","categoryId":"7005"}]}
this.$nextTick(() => {
  this.$refs.tree.setCurrentKey(this.nodekey);//数据请求成功后，设置默认current
});

样式自定义

.el-tree /deep/ .el-tree-node .el-tree-node__content{
  width: 200px;
  height: 43px;
  background: rgba(196,238,160,1);
  margin: 1px 0;
  color: #007D39;
}
.el-tree /deep/ .is-current>.el-tree-node__content{
  background: rgba(110,184,45,1) !important;
  color: #fff !important;
}
.el-tree /deep/ .el-tree-node__label {
  display: inline-block;
  width: 72%;
}
.el-tree /deep/ .is-current>.el-tree-node__content:after{
  content: "\2022";
  color: #fff;
  font-size: 40px;
  position: relative;
  right: 0;
  bottom: 0;
  cursor: pointer;
}
.el-tree /deep/ .el-tree-node__children .el-tree-node__content{
  width:200px;
  height:34px;
  background:rgba(228,247,211,1) !important;
}
.el-tree /deep/ .el-tree-node__children .is-current .el-tree-node__content {
  background: rgba(110,184,45,1) !important;
  color: #fff !important;
}
.el-tree /deep/ .el-tree-node__children .el-tree-node__content{
  color: #007D39 !important;
}
.el-tree /deep/ .el-tree-node__children .is-current .el-tree-node__content:after{
  content: "\2022";
  font-size: 40px;
  position: relative;
  right: 10px;
  bottom: 0;
  cursor: pointer;
  color: #fff !important;
}
.el-tree .el-tree-node__expand-icon{
  color: #fff !important;
}
.el-tree-node__expand-icon.is-leaf{
  color: transparent !important;
}