refactor: 手机端-标准化动态重构-增加下拉加载功能

2023-11-27 11:26:53 +08:00
parent 88706b6127
commit 4341b0603a
8 changed files with 744 additions and 0 deletions
@@ -0,0 +1,169 @@
+<template>
+    <div class="tree">
+      <el-tree
+         ref="tree"
+         node-key="id"
+         class="tree-line"
+         icon-class="icon-tree"
+         :indent="0"
+         :props="props"
+         :data="treeList"
+         :default-expanded-keys="['1']"
+         highlight-current
+         :current-node-key="currentKey"
+         :filter-node-method="filterNode"
+         @node-click="handleNodeClick">
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
+          <span style="font-size:18px"> {{ node.label }} </span>
+        </span>
+      </el-tree>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "folderTree",
+  data () {
+    return {
+      treeList: [],
+      props: {
+        label: 'name',
+        children: 'children'
+      },
+      currentKey: ''
+    }
+  },
+  created () {
+    this.getTreeData()
+  },
+  methods: {
+    getTreeData () {
+      this.$http._getData('fileMaterialCenter/zlTree').then(res => {
+        if (res.ok && res.data) {
+          this.treeList = res.data
+        }
+      })
+    },
+    filterNode (value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    handleNodeClick (data, node, element) {
+      this.$emit('checked', data)
+    },
+    setCurrentKey (id) {
+      this.currentKey = id
+      this.$nextTick(()=>{
+        this.$refs.tree.setCurrentKey(this.currentKey)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.tree-line {
+
+  /deep/ .el-tree-node {
+    position: relative;
+    padding-left: 0px; // 缩进量
+    line-height: 30px;
+  }
+
+  /deep/ .el-tree-node__children {
+    padding-left: 16px; // 缩进量
+    overflow: inherit; // 横向滚动条默认hidden
+  }
+  .el-tree-node__content{
+    //display: block!important;
+  }
+
+  // 竖线
+  /deep/ .el-tree-node::before {
+    content: "";
+    height: 100%;
+    width: 1px;
+    position: absolute;
+    //left: -3px;
+    //top: -26px;
+    left: -1px;
+    top: -5px;
+    border-width: 1px;
+    border-left: 1px dashed #858990e0;
+  }
+
+  // 当前层最后一个节点的竖线高度固定
+  /deep/ .el-tree-node:last-child::before {
+    //height: 38px; // 可以自己调节到合适数值
+    height: 17px; // 可以自己调节到合适数值
+  }
+
+  // 横线
+  /deep/ .el-tree-node::after {
+    content: "";
+    width: 11px;
+    height: 20px;
+    position: absolute;
+    //left: -3px;
+    left: -1px;
+    top: 12px;
+    border-width: 1px;
+    border-top: 1px dashed #858990e0;
+  }
+
+  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
+  /deep/ & > .el-tree-node::after {
+    border-top: none;
+  }
+
+  /deep/ & > .el-tree-node::before {
+    border-left: none;
+  }
+
+  // 展开关闭的icon
+  /deep/ .el-tree-node__expand-icon {
+    font-size: 20px;
+    // 叶子节点（无子节点）
+    &.is-leaf {
+      color: transparent;
+       //display: none; // 也可以去掉
+    }
+  }
+}
+
+/deep/ .icon-tree {
+  margin: 0 5px 0 10px;
+  position: relative;
+  background: url('~@/assets/images/shangqi/img/tree-add.png');
+  background-size: 100% 100%;
+}
+
+/deep/ .is-leaf {
+  background-image: none;
+  background-size: 100% 100%;
+}
+
+/deep/ .expanded {
+  background: url('~@/assets/images/shangqi/img/tree-sub.png');
+  background-size: 100% 100%;
+}
+
+/deep/ .is-leaf-none {
+  position: relative;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: url('~@/assets/images/shangqi/img/none-file-new.png');
+  background-size: 100% 100%;
+}
+
+/deep/ .is-show {
+  position: relative;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: url('~@/assets/images/shangqi/img/tree.png');
+  background-size: 100% 100%;
+}
+</style>