element UI Tree组件 箭头更换默认样式,默认选中某项节点,默认选中的高亮样式

Tree组件箭头更换默认样式,默认选中某项节点,默认选中的高亮样式

<template>
  <div class="about">
    <el-tree
      :data="data"
      :props="defaultProps"
      highlight-current
      ref="tree"
      node-key="id"
      :default-expanded-keys="[keys]"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span :name="node.label" @click="log(node, data)">
          <i
            v-if="node.expanded === true"
            class="iconfont icon-jiantouloukong-xia"
          ></i>
          <i v-else-if="node.expanded === false && !data.children" class=""></i>
          <i v-else class="iconfont icon-jiantouloukong-you"></i>
          <!-- <i
            :class="
              node.expanded
                ? 'iconfont icon-jiantouloukong-xia'
                : 'iconfont icon-jiantouloukong-you'
            "
          ></i> -->
          <!-- <i v-else class="iconfont icon-jiantouloukong-xia"></i -->
          {{ node.label }}
        </span>
      </span>
    </el-tree>
    <el-input placeholder=""></el-input>
    <el-button type="primary" @click="go">点击</el-button>
  </div>
</template>
<script>
export default {
  name: "about",
  data() {
    return {
      data: [
        {
          id: "1",
          label: "一级 1",
          children: [
            {
              id: "4",
              label: "二级 1-1",
              children: [
                {
                  id: "9",
                  label: "三级 1-1-1",
                },
                {
                  id: "10",
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: "2",
          label: "一级 2",
          children: [
            {
              id: "5",
              label: "二级 2-1",
            },
            {
              id: "6",
              label: "二级 2-2",
            },
          ],
        },
        {
          id: "3",
          label: "一级 3",
          children: [
            {
              id: "7",
              label: "二级 3-1",
            },
            {
              id: "8",
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      keys:''
    };
  },
  mounted() {
    this.$nextTick(function () {
      // this.$refs.tree.setCurrentKey("7");
    });
  },
  computed: {
    iconStyle: function (data) {
      this.a(data);
      //console.log(data)
      // if( data.children.length > 0 ) {
      //   return true
      // }else{
      //   return false
      // }
    },
    
  },
  methods: {
    log(node, data) {
      console.log(node, "node");
      console.log(data, "data");
    },
    a(data) {},
    go(){
      this.keys = "9"
       this.$refs.tree.setCurrentKey(this.keys)
      // this.$nextTick(() => {
       
      // })
    }
  },
};
</script>
<style scoped lang="less">
.about {
  width: 450px;
  margin: auto;
  margin-top: 150px;
  /deep/ .el-tree-node__content {
    height: 36px;
    .el-tree-node__label {
      font-size: 20px;
    }
  }
}
/deep/ .el-tree-node__expand-icon {
  display: none;
}
/deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: aqua;
}
</style>