fiveFollowing-admin/src/views/monthReport/index.vue

<template>
  <div class="dashboard-container">
    <div class="dashboard-text">月度报告</div>

    <el-tree default-expand-all :data="data">
      <span
        class="custom-tree-node"
        :default-slot="{node,data}"
        style="width: 100%"
        @mouseenter="mouseenter(data)"
        @mouseleave="mouseleave(data)"
      >
        <span>{{ node.label }}</span>
        <el-link
          v-show="data.show"
          size="mini"
          style="margin-left: 5px"
          type="primary"
          icon="el-icon-plus"
        ></el-link>
        <el-link
          v-show="data.show"
          size="mini"
          style="margin-left: 5px"
          type="primary"
          icon="el-icon-delete"
        ></el-link>
      </span>
    </el-tree>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      data: [
        {
          id: 0,
          label: "水果",
          show: false,
          children: [
            {
              id: 1,
              label: "苹果",
              show: false,
            },
            {
              id: 2,
              label: "芒果",
              show: false,
            },
          ],
        },
      ],
    };
  },
  methods: {
    mouseenter(data) {
      alert(1)
      console.log(data);
      data.show = true;
    },

    mouseleave(data) {
      console.log(data);
      data.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>