美文网首页
ant-design-vue的tree的懒加载更新问题

ant-design-vue的tree的懒加载更新问题

作者: divine_zhouo | 来源:发表于2021-08-24 16:46 被阅读0次

情景:

需求:1. 树是懒加载,默认只展开第一级节点;2. 展开某个节点对其子节点新增操作;3. 新增成功后,树刷新并自动展开之前展开的节点

方法:

onLoadData(treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        setTimeout(() => {
          getMaterialSortTree({
            ParentId: treeNode.dataRef.Id,
            Name: this.searchValue,
          }).then((response) => {
            response.Result.forEach((item) => {
              this.$set(item, "scopedSlots", { title: "slot" });
              // 根据之前展开的节点数据找出应当展开的节点,并放进expandedKeys中
              if (this.expandedKeys.filter((id) => id == item.Id).length > 0) {
                this.expandedKeys.push(item.Id);
              }
            });
            var childrenData = response.Result;
            treeNode.dataRef.children = childrenData;
            this.gData = [...this.gData];
          });
          resolve();
        }, 1);
      });
    },

附上整个文件的代码,走你

<template>
  <div class="manufact-tree">
    <a-input-search placeholder="" enter-button @search="onSearch" />
    <a-tree
      v-if="gData.length"
      :expanded-keys="expandedKeys"
      :tree-data="gData"
      :load-data="onLoadData"
      :replace-fields="replaceFields"
      @select="selectNode"
      @expand="onExpand"
    >
      <template slot="slot" slot-scope="text">
        <i style="color: #09e009" class="iconfont icon-quyu" />
        <span v-if="text.Name.indexOf(searchValue) > -1">
          {{ text.Name.substr(0, text.Name.indexOf(searchValue)) }}
          <span style="color: #f50">{{ searchValue }}</span>
          {{
            text.Name.substr(
              text.Name.indexOf(searchValue) + searchValue.length
            )
          }}
        </span>
        <span v-else>{{ text.Name }}</span>
      </template>
    </a-tree>
  </div>
</template>

<script>
import TreeIconTemplate from "@/components/TreeIconTemplate";
import { getMaterialSortTree } from "@/api/base-info/manufacturing-supplies/index.js";
import { mapActions } from "vuex";

export default {
  components: { TreeIconTemplate },
  data() {
    return {
      expandedKeys: [],
      searchValue: "",
      gData: [],
      dataList: [],
      replaceFields: {
        title: "Name",
        key: "Id",
        scopedSlots: { title: "slot" },
      },
      selectedNode: null,
    };
  },
  created() {
    this.getTreeData({ ParentId: 0 });
  },
  methods: {
    ...mapActions(["changeTreeMonitorNode"]),
    getTreeData(treeParameter) {
      this.gData = [];
      getMaterialSortTree(treeParameter).then(({ Result }) => {
        this.gData = Result;
        Result.forEach((item) => {
          this.$set(item, "scopedSlots", { title: "slot" });
          this.expandedKeys.push(item.Id);
        });
        this.selectNode(Result[0].Id, { node: { dataRef: Result[0] } });
      });
    },
    onLoadData(treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        setTimeout(() => {
          getMaterialSortTree({
            ParentId: treeNode.dataRef.Id,
            Name: this.searchValue,
          }).then((response) => {
            response.Result.forEach((item) => {
              this.$set(item, "scopedSlots", { title: "slot" });
              if (this.expandedKeys.filter((id) => id == item.Id).length > 0) {
                this.expandedKeys.push(item.Id);
              }
            });
            var childrenData = response.Result;
            treeNode.dataRef.children = childrenData;
            this.gData = [...this.gData];
          });
          resolve();
        }, 1);
      });
    },
    onExpand(expandedKeys, { node }) {
      this.expandedKeys = expandedKeys;
      this.searchValue = "";
    },
    async onSearch(value) {
      this.getTreeData({
        Name: value,
        ParentId: 0,
      });
      this.searchValue = value;
    },
    selectNode(selectedKeys, { node }) {
      this.selectedKeys = selectedKeys;
      this.$emit("select", node.dataRef);
      this.selectedNode = {
        Id: node.dataRef.Id,
        Name: node.dataRef.Name,
        MaterialType: node.dataRef.MaterialType,
        ParentId: node.dataRef.ParentId,
        module: "manufacturing",
        getTreeData: this.getTreeData,
      };
      this.changeTreeMonitorNode(this.selectedNode);
    },
  },
};
</script>
<style lang="less" scoped>
.manufact-tree {
  padding: 10px;
}
</style>

相关文章

网友评论

      本文标题:ant-design-vue的tree的懒加载更新问题

      本文链接:https://www.haomeiwen.com/subject/qswdiltx.html