初次提交

src/components/Tree/index.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="tree-container">
+    <el-tree
+      ref="tree"
+      :indent="0"
+      :data="treeData"
+      default-expand-all
+      :props="defaultProps"
+      node-key="id"
+      :check-on-click-node="true"
+      :check-strictly="true"
+      :current-node-key="currentNode"
+      @node-click="handleTreeCheck"
+    >
+      <span slot-scope="{ node }" class="custom-tree-node">
+        <span>
+          <i class="el-icon-s-platform" style="color: #02e9ae" />{{ node.label }}
+        </span>
+      </span>
+    </el-tree>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    defaultProps: {
+      type: Object,
+      default: function() {
+        return {
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    type: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      currentNode: undefined
+    }
+  },
+  computed: {},
+  watch: {
+    treeData: {
+      handler(val) {
+        if (val.length > 0) {
+          this.$nextTick(() => {
+            if (this.type === 'pvinverter') {
+              this.currentNode = val[0].children !== undefined && val[0].children.length > 0 ? val[0].children[0].id : val[0].id
+              this.$emit('handleTreeCheck', val[0].children !== undefined && val[0].children.length > 0 ? val[0].children[0] : val[0])
+              this.$refs.tree.setCurrentKey(this.currentNode)
+            } else {
+              this.currentNode = val[0].id
+              this.$emit('handleTreeCheck', val[0])
+              this.$refs.tree.setCurrentKey(this.currentNode)
+            }
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    filterNode(val) {
+      this.currentNode = val.id
+      this.$emit('filterNode', val)
+    },
+    handleTreeCheck(val) {
+      this.$emit('handleTreeCheck', val)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ .tree-container {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+  .tree-container /deep/ .el-tree-node__expand-icon.expanded {
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.tree-container {
+  margin-top: 10px;
+  padding-bottom: 40px;
+
+  .tree-box {
+    width: 100%;
+    height: calc(100% - 40px);
+    overflow: auto;
+  }
+  .iconfont {
+    color: aquamarine;
+    margin-right: 5px;
+  }
+}
+.tree-container /deep/ .el-icon-caret-right:before {
+  content: "\e791";
+  font-size: 18px;
+}
+
+.tree-container /deep/ .el-tree-node__expand-icon {
+  margin-left: 15px;
+  padding: 0px;
+}
+
+.tree-container /deep/ .el-tree-node__expand-icon.is-leaf {
+  margin-left: 0px;
+}
+
+.tree-container /deep/ .el-tree-node {
+  position: relative;
+  padding-left: 16px;
+}
+
+.tree-container /deep/ .el-tree-node__children {
+  padding-left: 16px;
+}
+
+.tree-container /deep/ .el-tree > .el-tree-node:before {
+  border-left: none;
+}
+
+.tree-container /deep/ .el-tree > .el-tree-node:after {
+  border-top: none;
+}
+.tree-container /deep/ .el-tree > .el-tree-node:before {
+  border-left: none;
+}
+
+.tree-container /deep/ .el-tree > .el-tree-node:after {
+  border-top: none;
+}
+
+.tree-container /deep/ .el-tree-node:before {
+  content: "";
+  left: 7px;
+  position: absolute;
+  right: auto;
+  border-width: 1px;
+}
+
+.tree-container /deep/ .el-tree-node:after {
+  content: "";
+  left: 10px;
+  position: absolute;
+  right: auto;
+  border-width: 1px;
+}
+
+.tree-container /deep/ .el-tree-node:before {
+  border-left: 1px dashed rgba(126, 147, 166, 0.5);
+  bottom: 0px;
+  height: 100%;
+  top: 0px;
+  width: 1px;
+}
+
+.tree-container /deep/ .el-tree-node:after {
+  border-top: 1px dashed rgba(126, 147, 166, 0.5);
+  height: 25px;
+  top: 20px;
+  width: 20px;
+}
+
+.el-tree-node :last-child:before {
+  height: 40px;
+}
+
+.tree-container /deep/ .el-tree .el-tree-node {
+  position: relative;
+}
+.tree-container /deep/ .el-tree-node .el-tree-node__content {
+  height: 40px;
+  padding-left: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  width: 200px;
+  line-height: 40px;
+}
+.tree-container /deep/ .el-tree-node .el-tree-node__content::before {
+  border-left: 1px dashed rgba(126, 147, 166, 0.5);
+  height: 100%;
+  top: 0;
+  width: 1px;
+  margin-left: 1px;
+  margin-top: 0px;
+  z-index: 8;
+}
+.tree-container
+  /deep/
+  .el-tree-node
+  .el-tree-node__children
+  .el-tree-node__content::before {
+  border-left: 0px solid #e6e6e6;
+  height: 100%;
+  top: 0;
+  width: 1px;
+  margin-left: 1px;
+  margin-top: 0px;
+  z-index: 8;
+}
+
+.tree-container /deep/ .el-tree-node .el-tree-node__content::after {
+  border-top: 1px dashed rgba(126, 147, 166, 0.5);
+  height: 1px;
+  top: 18px;
+  width: 13px;
+  margin-left: 1px;
+  z-index: 8;
+}
+
+.tree-container
+  /deep/
+  .el-tree-node
+  .el-tree-node__children
+  .el-tree-node__content::after {
+  border-top: 0px solid #e6e6e6;
+}
+
+.tree-container .el-tree-node .el-tree-node__content::before,
+.tree-container .el-tree-node .el-tree-node__content::after {
+  content: "";
+  position: absolute;
+  right: auto;
+}
+.tree-container {
+  /deep/ .el-tree-node.is-current > .el-tree-node__content {
+        background:#0b435f;
+        color:#fff;
+        /deep/ .el-tree-node__expand-icon {
+          color: #fff;
+        }
+        /deep/ .is-leaf {
+          color: rgba(0, 0, 0, 0);
+        }
+      }
+    /deep/  .el-tree .is-current{
+      background: none !important;
+    }
+}
+</style>