vue中修改el-tree前面的图标，点击父节点前图标展开和收缩子节点，点击父节点内容不展开和收缩子节点

效果

实现代码

<template>
  <div class="app-container">
    <!-- :expand-on-click-node="false"  设置el-tree点击前面的图标时展开和收缩子节点，点击内容时不进行展开和收缩 -->
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false"></el-tree>
  </div>
</template>

数据部分
 data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label',

  //获取当前选中的节点
  handleNodeClick(data) {
        console.log(data);
      }

样式
/*树节点前面的图标修改*/
/deep/ .el-tree .el-tree-node__expand-icon.expanded
{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
/deep/ .el-tree .el-icon-caret-right:before
/* 折起的样式 */
{
    /* folderMinus.png 展开的样式图片 */
    background: url("../../../public/img/folderMinus.png") no-repeat center ;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
}
/* 展开的样式 */
/deep/ .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
{
   /*folderOpen.png 展开的样式图片 */
    background: url("../../../public/img/folderOpen.png")   no-repeat  center;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
}
/* 最后一级 */
/deep/  .el-tree-node__expand-icon.is-leaf::before
{
    /* file.png 是最后一级图片 */
    background: url("../../../public/img/file.png")   no-repeat  center center;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
}

参考文献 blog.csdn.net/weixin_4341…