el-tree懒加载以及动态局部刷新数据，添加指示虚线

1、:render-content="renderContent"可以渲染树的样式
2、再次点击已经展开过的节点不执行load方法时使用以下方法让此重新执行

// node.childNodes=[];
node.loaded = false;
node.expand();

注意设置： :indent=“0”，否则节点会出现较大缩进

<template>
  <div class="classifyManage">
      <!-- 左侧树 -->
      <el-tree class="tree-line" :indent="0" :props="defaultProps" ref="tree" :load="loadNode" lazy @node-click="handleNodeClick" node-key="sortCodeName" :default-expanded-keys="treeExpandData" :render-content="renderContent"></el-tree>
      <!-- 右侧 -->
      <div class="search-form">
        <label>时间选择：</label>
        <el-date-picker clearable class="search-input pad30 magRight10" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" v-model="startTime" :picker-options="startPickerOptions"></el-date-picker>至
        <el-date-picker clearable class="search-input pad30 magLeft10" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" v-model="endTime" :picker-options="endPickerOptions"></el-date-picker>
       </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: "", //开始时间
      endTime: "", //结束时间
      startPickerOptions: {
        disabledDate: (time) => {
          if (this.endTime) {
            return time.getTime() > new Date(this.endTime).getTime();
          } else {
            return time.getTime() > Date.now();
          }
        },
      }, //时间选择禁止选择未来日期:[],
      endPickerOptions: {
        disabledDate: (time) => {
          if (this.startTime) {
            return (
              time.getTime() < new Date(this.startTime).getTime() ||
              time.getTime() > Date.now()
            );
          }
        },
      },
      defaultProps: {
        children: "children",
        label: "sortCodeName",
        isLeaf: (data, node) => {
        // 当级别为5时不展示下拉箭头，也就是为叶子节点
          if (node.level === 5) {
            return true;
          }
        },
      },
      currentObj: null,
      node_had: [], //缓存树节点的node
      resolve_had: [], //缓存树节点的resolve
      treeExpandData:[],//树默认展开的数组
      arrIndex:"",//分类码数组的下标
    };
  },
  created(){
    this.queryUsingInfoResTypeFun(res=>{
      this.treeExpandData.push("全部分类");
    });
  },
  watch: {
     'treeExpandData':function(newVal, oldVal) {
       if(newVal){
        this.$nextTick(() => {
          const firstNode = document.querySelector(".el-tree-node").children[0];
          if(firstNode){
            firstNode.click();
          }
        })
       }
     }
  },
  computed:{
      fatherName(){
        var result=""
        if(this.node_had.data){
          if(this.node_had.data.sortCodeName=="全部分类"){
              result="全部分类";
          }else{
              result=this.currentObj.sortCodeName;
          }
        }
        return result;
      },
  },
  methods: {
    // 懒加载树节点
    loadNode(node, resolve) {
      this.node_had = node;
      this.resolve_had = resolve;
      // 第一级插入全部分类
      if (node.level === 0) {
        resolve([{ sortCodeName: "全部分类", parentSortCode: 0 }]);
            // this.$nextTick().then(() => {
            // const firstNode = document.querySelector(".el-tree-node");
            // if(firstNode){
            //  firstNode.click();
            // }
            // });
      }
      // 二级分类使用0查询
      if (node.level == 1) {
        querySortListByParentCode(0, (res) => {
          if (res.code == 0) {
            resolve(res.data);
          }
        });
        // 目前为4级
      } else if (node.level <= this.level) {
        node.isLeaf = false;
        querySortListByParentCode(node.data.sortCodeCode, (res) => {
          if (res.code == 0) {
            resolve(res.data);
          }
        });
      } else {
        node.isLeaf = false;
        resolve([]);
      }
    },
    //当code=1时置灰字体
    renderContent(h, { node, data, store }) {
      if (node.level == this.level + 1) {
        return (
          <el-button type="text" id="codeStop" disabled style="color:#a1a8af">
            {node.data.sortCodeName}
          </el-button>
        );
      } else {
        return (
          <el-button type="text" style="color:#2f4470">
            {node.data.sortCodeName}
          </el-button>
        );
      }
    },
    // 点击树节点
    handleNodeClick(data,node) {
      ***// 重点：让load重新执行的方法，会重新调用this.loadNode方法，展开过之后再点击依然可以刷新数据
      node.childNodes=[];
      node.loaded = false;
      node.expand();***

      this.currentObj = data;
        //   最后一级禁用新增按钮
      this.arrIndex = this.usingInfoResType[this.currentObj.rateCode];
      if (this.arrIndex < this.level || this.arrIndex == undefined) {
        this.addBtn = true;
      } else {
        this.addBtn = false;
      }
      if (data.parentSortCode !== 0 && this.arrIndex !== this.level) {
        this.tableColumn.name =
          this.resTypeDataRatesResult[this.arrIndex].rateName + "的名称";
      } else {
        this.tableColumn.name = "类的名称";
      }
      this.getTableData();
    },
    // 编辑表格刷新树
    editSortCodeFun() {
    	this.loadNode(this.node_had, this.resolve_had);
    }
    },
  },
};
</script>

el-tree添加指示虚线，最终效果如下：

// 设置样式

注意：tree-line是tree父容器的类名，通过此方法设置tree的根节点样式，以下为scss，记得去掉scoped，或者使用/deep/

<style lang="scss">
.tree-line{
  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }
  // 竖线
  .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #52627C;
  }
  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }
  // 横线
  .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #52627C;
  }
  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }
  // 展开关闭的icon
  .el-tree-node__expand-icon{
    font-size: 16px;
    // 叶子节点（无子节点）
    &.is-leaf{
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
// 不旋转图标
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg) !important;
  transform: rotate(0deg) !important;
}
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg) !important;
  transform: rotate(0deg) !important;
}
// 未展开时显示加号
.el-tree .el-icon-caret-right:before {
  background: url("../images/iconjia.png") no-repeat 0 3px !important;
  content: "";
  display: block;
  width: 16px;
  height: 20px;
  font-size: 16px;
  /* background-size: 15px!important; */
}
/* 有子节点 且已展开显示减号 */
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("../images/iconjian.png") no-repeat !important;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  /* background-size: 15px!important;; */
}
/* 没有子节点不显示图片 */
.el-tree .el-tree-node__expand-icon.is-leaf::before {
  background: url("") no-repeat 0 3px !important;
  content: "";
  display: block;
  width: 14px;
  height: 21px;
  font-size: 16px;
  background-size: 16px;
}
</style>