element tree组件连接线以及懒加载_element-tree-line

      <el-tree highlight-current :indent="0"  default-expand-all :data="treelist" class="tree-line" ref="tree" node-key="id"  
      :props="defaultProps"  @node-click="nodeClick"  :expand-on-click-node="false"  lazy :load="loadNode">
      <!-- 插槽 -->
      <span class="custom-tree-node" slot-scope="{data}">
      <!-- 设置icon图标 -->
        <span>
          <i class="el-icon-folder"></i>
        </span>
        <span v-if="!data.id">
          <i class="el-icon-document"></i>
        </span>
        <span>
          {{ data.fvAreaName }}
        </span>
      </span>
    </el-tree>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

default-expand-all为节点数默认全部展开，懒加载适用

<script>
import bus from '@/utils/eventBus.js'
import { TableAPI} from '@/api/valuation/my_valuation.js'
  export default {
    props: {
      treelist: Array,
      ShowSave: Boolean,
      taskInfo : Object
    },
    data() {
      return {
       treelist:[],
      };
    },
    computed: {
    },
    created() {
    },
    mounted() {
    },
    computed: {
    },
    watch: {
    },
    methods: {
      
      // 该节点为真实选中的节点，不包含半勾选的上级节点
      nodeClick(data) {
        console.log(data,'节点点击');
      },
      
     // 刷新列表
     getTable() {
      // 初始化列表...
      TableAPI(this.params).then(el=>{
      
        })
     },
     // 获取选择的节点数组
      handleCheckChange(click, checked,index){
        // this.$refs.tree.setCheckedKeys([click.id]); // 只允许选择一个节点
        console.log('选择的节点',click,checked,index);
      },
      // 懒加载层级
      loadNode(node, resolve) {
        const id = node.data.id
        // 通过node.level的层级判断点击的是第几层
        if (node.level === 1) {
            CityAPI({id : this.taskInfo.taskId, provinceId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)
            })
        } else if (node.level === 2) {
            DistrictAPI({id : this.taskInfo.taskId, cityId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)  // 返回最新节点数据
            })
        } else if (node.level === 3) {
            SubdistrictAPI({id : this.taskInfo.taskId, districtId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)   // 返回最新节点数据
            })
        } else if (node.level === 4) {
            CommunityAPI({id : this.taskInfo.taskId, subdistrictId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false
                }))
                resolve(childNodes)  // 返回最新节点数据
            })
        } else if (node.level === 5) {
            CompoundAPI({id : this.taskInfo.taskId, communitytId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: true  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)  // 返回最新节点数据
            })
        } 
      }
    }
  };

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

利用css配置tree节点虚线

<style lang="scss">

// 点击选中的tree节点样式
.organization_configuration {
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    // 设置颜色
    color: #409eff; // 节点的字体颜色
    background: transparent;
  }
}

// tree连接线
.tree-line {
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  .el-tree-node__content {
    margin-top: 10px;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    left: -1px;
    top: -22px;
    border-width: 1px;
    border-left: 1px dashed #c0c4cc;
  }

  .el-tree-node:last-child::before {
    height: 33px;
  }

  .el-tree-node::after {
    content: '';
    width: 30px;
    height: 20px;
    position: absolute;
    left: 1px;
    top: 11px;
    border-width: 1px;
    border-top: 1px dashed #c0c4cc;
  }

  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }

  .el-tree-node__expand-icon {
    font-size: 18px;
    // color: #000;
    &.is-leaf {
      color: transparent;
      // display: none;
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

设置tree节点的连接线需要在tree组件上配置 :index = 0 ; 初始化节点的距离，否则节点的连接线位置会偏移，配置完成后使用上面的css样式即可，before伪元素为Y轴、after伪元素为X轴连接线。

另外
tree点击激活和失焦后的样式调整，如果上面的方法失效可以用这个

<style scoped lang='scss'>
  /* 改变被点击节点背景颜色，字体颜色 */
  .el-tree-node:focus > .el-tree-node__content {
    background-color: #4a9de7 !important;
    color: #fff !important;
  }
  /*节点失焦时的背景颜色*/
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
    background-color: #4a9de7 !important;
    color: #fff !important;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13