tree树形控件 修改小三角图标

 示例图：

 

<template>
  <div class="main">
    <el-row>
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <el-tree
            :data="data"
            :props="defaultProps"
            node-key
            highlight-current
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          ></el-tree></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      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",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

<style >
.el-tree .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .el-tree .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    /* //有子节点 且未展开 */
    .el-tree .el-icon-caret-right:before {
        background: url('../../src/assets/images/tagAdd.png') no-repeat 0 3px;
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        font-size: 16px;
        background-size: 16px;
    }

    /* //有子节点 且已展开 */
    .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        background: url('../../src/assets/images/tagDel.png') no-repeat 0 3px;
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        font-size: 16px;
        background-size: 16px;
    }

    /* //没有子节点 */
    .el-tree .el-tree-node__expand-icon.is-leaf::before {
        background: #fff;
        content: '';
        display: block;
        width: 0px;
        height: 0px;
        font-size: 16px;
        background-size: 16px;
    }
    
    /* //高亮字体颜色 */
    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        color: #409eff !important;
    }


</style>