vue树形element组件样式方法

1、temple中的代码

  <el-tree
        ref="tree"
        node-key="id"
        :data="data2"
        show-checkbox
        :props="defaultProps"
        @check-change="checkChange"
      >
      </el-tree>

data树形结构的数据
show-checkbox 显示复选框
ref 可以this.$refs.DeviceGroupTree拿到此控件
node-key 给节点的编号【树形数据结构中有id字段】
check-stricty 父、子节点之间没有关联【不写这个，选了父节点，会默认选择全部的子节点】
check 复选框选择、取消选择时触发的事件
:props=“defaultProps”，在data中绑定子节点的名称(label)和子节点（children）
@check-change="checkChange"绑定checkChange方法，当树结构改变的时候触发这个方法

  defaultProps: {
        label: "label",
        children: "children",
      },

2、绑定的:data属性

  data2: [
        {
          id: 1,
          label: "企业点",
          children: [
            {
              id: 4,
              label: "工贸企业",
            },
            {
              id: 5,
              label: "危险化学品",
            },

            {
              id: 6,
              label: "建筑施工",
            },
            {
              id: 7,
              label: "教育",
            },
            {
              id: 8,
              label: "民爆及烟花爆竹",
            },
            {
              id: 9,
              label: "矿山企业",
            },
            {
              id: 10,
              label: "其他企业",
            },
          ],
        },
        {
          id: 2,
          label: "风险点",
        },
        {
          id: 3,
          label: "隐患点",
        },
      ],
       defaultProps: {
        label: "label",
        children: "children",
      },

3、拿到选中的所有的label（名称）

1、当树形框改变之后，页面拿到所有选中的值的实体信息，并把实体信息进行foreach循环保存在新建的数组中
getCheckedNodes（拿到所有的选中节点）

 checkChange() {
      let res = this.$refs.tree.getCheckedNodes();
      let arr = [];
      res.forEach((item) => {
        arr.push(item.label);
      });}

2、打开页面并渲染指定的数据
setCheckedNodes设置数据

 this.$nextTick(() => {
        //  this.$nextTick(()是一个异步事件，
        this.$refs.tree.setCheckedNodes(this.data2);
      });

4、树形组件样式

1、自定义样式

/* 设置树形最外层的背景颜色和字体颜色 */
.el-tree {
  color: #fff;
  background: transparent;
}
 
/* 设置三角形图标的颜色 */
.el-tree-node__expand-icon {
  color: #fff;
}
 
/* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */
.el-tree-node__content:hover .el-tree-node__expand-icon {
  color: #000;
}
/* .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {
  color: transparent;
} */
 
/* 树节点鼠标悬浮式改变背景色，字体颜色 */
.el-tree-node__content:hover {
  background-color: #3274e6;
  color: #fff;
}
 
/* 改变节点高度 */
.el-tree-node__content {
  height: 36px;
}
 
/* 节点前边的三角图标并不会被节点样式影响，需要单独修改 当前激活的颜色*/
.el-tree-node:focus > .el-tree-node__content
  .el-tree-node__expand-icon {
  color: #fff;
}
 
/* 改变被点击节点背景颜色，字体颜色 */
.el-tree-node:focus > .el-tree-node__content {
  background-color: #3274e6;
  color: #fff;
}

2、如果父组件带 scoped

则要带上自定义样式下面的深度样式（因为我的放在.leftbox下面在）

.leftbox /deep/.el-checkbox__label {
  display: inline-block;
  padding-left: 0.3rem;
  line-height: 15px;
  font-size: 15px;
  font-weight: bolder;
  color: white;
}
/* 设置树形最外层的背景颜色和字体颜色 */
.leftbox /deep/.el-tree {
  color: #fff;
  background: transparent;
}

/* 设置三角形图标的颜色 */
.leftbox /deep/ .el-tree-node__expand-icon {
  color: #fff;
}

/* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */
.leftbox /deep/ .el-tree-node__content:hover .el-tree-node__expand-icon {
  color: #000;
}
/* .el-tree-node__content:hover .el-tree-node__expand-icon.is-leaf {
  color: transparent;
} */

/* 树节点鼠标悬浮式改变背景色，字体颜色 */
.leftbox /deep/ .el-tree-node__content:hover {
  background-color: #3274e6;
  color: #fff;
}

/* 改变节点高度 */
.leftbox /deep/ .el-tree-node__content {
  height: 26px;
}

/* 节点前边的三角图标并不会被节点样式影响，需要单独修改 当前激活的颜色*/
.leftbox
  /deep/
  .el-tree-node:focus
  > .el-tree-node__content
  .el-tree-node__expand-icon {
  color: #fff;
}

/* 改变被点击节点背景颜色，字体颜色 */
.leftbox /deep/.el-tree-node:focus > .el-tree-node__content {
  background-color: #3274e6;
  color: #fff;
}

最后效果