syncTree.vue

<template>
  <div class="sync-tree scrollbar">
    <el-tree
      ref="synctree"
      :accordion="true"
      :filter-node-method="filterNode"
      :data="syncTreeData"
      class="resource-wrap"
      node-key="id"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
          <span class="tree-label">{{ data.label }}</span>
        </span>
        <span class="tree-btn" v-if="node.label == '平台同步资源'">
          <i
            :class="{ 'el-icon-refresh': true, animterefresh: refreshload }"
            @click.stop="nodeRefreshClick(node, data)"
          ></i>
        </span>
        <span class="tree-btn" v-if="node.label == '视频云平台同步资源'">
          <i
            :class="{ 'el-icon-refresh': true, animterefresh: cloudRefreshload }"
            @click.stop="cloudNodeRefreshClick(node, data)"
          ></i>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
// import TreeRender from "../treeRender";
export default {
  data() {
    return {
      isLoadingTree: false,
      refreshload: false,
      cloudRefreshload: false,
      syncTreeData: [
        {
          id: "0",
          unid: "0",
          label: "平台同步资源",
          root: "平台同步资源",
          children: [],
        },
        {
          id: "-1",
          unid: "-1",
          label: "视频云平台同步资源",
          root: "视频云平台同步资源",
          children: [],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  props: {
    filterText: {
      type: String,
      default: "",
    },
    treeDatas: {
      type: Array,
      defalut: [],
    },
  },
  components: {},
  watch: {
    filterText(val) {
      // this.$refs.synctree.filter(val);
      setTimeout(() => {
        this.$refs.synctree.filter(val);
      }, 100);
    },
    treeDatas(val) {
      this.treeData[0].childs = val;
    },
  },
  methods: {
    initTree(data) {
      this.syncTreeData[0].children = data;
      this.refreshload = false;
      this.isLoadingTree = true;
    },
    initCloudTree(data) {
      this.syncTreeData[1].children = data;
      this.cloudRefreshload = false;
      this.isLoadingTree = true;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      debugger;
      if (data.label !== "平台同步资源" && data.is_leaf) {
        this.$emit("syncTable", data);
      }
    },
    handleRefresh(s, d, n) {
      // console.log(s, d, n)
      console.log("调用父级方法: ", this);
      this.syncTreeData = [
        {
          id: "1",
          label: "平台同步资源",
          root: "平台同步资源",
          children: [],
        },
        {
          id: "2",
          label: "视频云平台同步资源",
          root: "视频云平台同步资源",
          children: [],
        },
      ];
      this.$parent.getSyncTree();
    },
    nodeRefreshClick() {
      this.refreshload = true;
      this.$emit("refreshData");
    },
    cloudNodeRefreshClick() {
      this.cloudRefreshload = true;
      this.$emit("cloudRefreshData");
    },
  },
};
</script>

<style scoped>
.sync-tree {
  /* max-height: 216px; */
  /* overflow: hidden; */
}

.animterefresh {
  animation: turn 1s linear infinite;
}

@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}
</style>