antdesign——Tree树形控件

需求

• 根据所有数据展示树形结构
• 根据选中数据获取选中节点的keys集合，渲染默认选中的节点

根据选中数据获取选中节点的keys集合

const checkedData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [{ title: "0-0-0-0", key: "0-0-0-0" }],
      },
      {
        title: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      { title: "0-1-0-0", key: "0-1-0-0" },
      { title: "0-1-0-1", key: "0-1-0-1" },
      { title: "0-1-0-2", key: "0-1-0-2" },
    ],
  },
  {
    title: "0-2",
    key: "0-2",
  },
];

  mounted() {
    // 根据选中的树数组checkedData，获取默认选择的keys集合checkedKeys
    this.checkedData.forEach((item) => {
      this.getDefaultKeys(item, this.checkedKeys);
    });
  },
  methods: {
    // 采用递归的方法获取选中的集合
    getDefaultKeys(node, arr) {
      if (!node.children) {
        return arr.push(node.key);
      }
      node.children.forEach((item) => {
        this.getDefaultKeys(item, arr);
      });
    },
  }

整个组件代码

<template>
  <div>
    <a-tree
      v-model="checkedKeys"
      checkable
      :expanded-keys="expandedKeys"
      :auto-expand-parent="autoExpandParent"
      :selected-keys="selectedKeys"
      :tree-data="treeData"
      @expand="onExpand"
      @select="onSelect"
    />
  </div>
</template>

<script>
const treeData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [
          { title: "0-0-0-0", key: "0-0-0-0" },
          { title: "0-0-0-1", key: "0-0-0-1" },
          { title: "0-0-0-2", key: "0-0-0-2" },
        ],
      },
      {
        title: "0-0-1",
        key: "0-0-1",
        children: [
          { title: "0-0-1-0", key: "0-0-1-0" },
          { title: "0-0-1-1", key: "0-0-1-1" },
          { title: "0-0-1-2", key: "0-0-1-2" },
        ],
      },
      {
        title: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      { title: "0-1-0-0", key: "0-1-0-0" },
      { title: "0-1-0-1", key: "0-1-0-1" },
      { title: "0-1-0-2", key: "0-1-0-2" },
    ],
  },
  {
    title: "0-2",
    key: "0-2",
  },
];
const checkedData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [{ title: "0-0-0-0", key: "0-0-0-0" }],
      },
      {
        title: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      { title: "0-1-0-0", key: "0-1-0-0" },
      { title: "0-1-0-1", key: "0-1-0-1" },
      { title: "0-1-0-2", key: "0-1-0-2" },
    ],
  },
  {
    title: "0-2",
    key: "0-2",
  },
];
export default {
  data() {
    return {
      expandedKeys: ["0-0-0"], //默认展开节点
      autoExpandParent: true,
      selectedKeys: [],
      treeData, // 全部数据
      checkedData, // 选中的数据
      checkedKeys: [], // 选中的节点keys集合
    };
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck", val);
    },
  },
  mounted() {
    // 根据选中的树数组checkedData，获取默认选择的keys集合checkedKeys
    this.checkedData.forEach((item) => {
      this.getDefaultKeys(item, this.checkedKeys);
    });
  },
  methods: {
    // 采用递归的方法获取选中的集合
    getDefaultKeys(node, arr) {
      if (!node.children) {
        return arr.push(node.key);
      }
      node.children.forEach((item) => {
        this.getDefaultKeys(item, arr);
      });
    },
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log("onCheck", checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log("onSelect", info);
      this.selectedKeys = selectedKeys;
    },
  },
};
</script>
<style lang="less" scoped></style>