tetapan pokok antd vue dipilih secara lalai

Apabila menggunakan perpustakaan komponen Ant Design Vue dalam projek Vue, selalunya perlu menggunakan komponen Tree (kawalan pokok) untuk memaparkan data struktur hierarki. Apabila pengguna menggunakan Tree, mereka mungkin perlu memilih nod tertentu secara lalai Artikel ini akan memperkenalkan cara menggunakan komponen Tree Ant Design Vue untuk mencapai pemilihan lalai.

1. Tetapkan pilihan lalai dalam sumber data

Andaikan sekarang kami mempunyai data struktur pokok berikut:

treeData: [
  {
    title: 'Node1',
    key: 'node1',
    children: [
      {
        title: 'Node1.1',
        key: 'node1-1',
        children: [
          {
            title: 'Node1.1.1',
            key: 'node1-1-1',
            isLeaf: true
          },
          {
            title: 'Node1.1.2',
            key: 'node1-1-2',
            isLeaf: true
          }
        ]
      },
      {
        title: 'Node1.2',
        key: 'node1-2',
        isLeaf: true
      }
    ]
  },
  {
    title: 'Node2',
    key: 'node2',
    isLeaf: true
  }
]

Kami mahukan pilihan lalaiNode1.1.2Nod. Kemudian kita boleh menambah atribut selected pada objek data nod dan menetapkannya kepada true:

treeData: [
  {
    title: 'Node1',
    key: 'node1',
    children: [
      {
        title: 'Node1.1',
        key: 'node1-1',
        children: [
          {
            title: 'Node1.1.1',
            key: 'node1-1-1',
            isLeaf: true
          },
          {
            title: 'Node1.1.2',
            key: 'node1-1-2',
            isLeaf: true,
            selected: true // 将该节点设置为默认选中
          }
        ]
      },
      {
        title: 'Node1.2',
        key: 'node1-2',
        isLeaf: true
      }
    ]
  },
  {
    title: 'Node2',
    key: 'node2',
    isLeaf: true
  }
]

Seterusnya, dalam komponen Pokok, petakan atribut selected nod kepada lalai pemilihan boleh dilengkapkan pada atribut selectedKeys komponen:

<template>
  <a-tree :tree-data="treeData" :selected-keys="selectedKeys"></a-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Node1',
          key: 'node1',
          children: [
            {
              title: 'Node1.1',
              key: 'node1-1',
              children: [
                {
                  title: 'Node1.1.1',
                  key: 'node1-1-1',
                  isLeaf: true
                },
                {
                  title: 'Node1.1.2',
                  key: 'node1-1-2',
                  isLeaf: true,
                  selected: true // 将该节点设置为默认选中
                }
              ]
            },
            {
              title: 'Node1.2',
              key: 'node1-2',
              isLeaf: true
            }
          ]
        },
        {
          title: 'Node2',
          key: 'node2',
          isLeaf: true
        }
      ],
      selectedKeys: []
    };
  },

  mounted() {
    this.selectedKeys = this.treeData.flatMap(node => {
      if (node.selected) {
        return node.key;
      } else if (node.children) {
        return node.children.flatMap(child => {
          if (child.selected) {
            return child.key;
          } else {
            return [];
          }
        });
      } else {
        return [];
      }
    });
  }
};
</script>

Dalam contoh ini, kami menggunakan kaedah ES6 Array.prototype.flatMap() untuk memetakan nilai key semua nod yang dipilih kepada selectedKeys dalam tatasusunan. Kaedah flatMap() boleh meratakan tatasusunan bersarang menjadi tatasusunan satu dimensi.

2. Gunakan defaultExpandedKeys untuk menetapkan nod pengembangan lalai

Selain atribut selectedKeys, komponen Pokok Ant Design Vue juga mempunyai defaultExpandedKeys atribut untuk menetapkan nod dikembangkan lalai. Sifat ini menerima tatasusunan rentetan yang menunjukkan nod yang perlu dikembangkan secara lalai.

Jika dalam data struktur pepohon di atas, kami mahu mengembangkan nod Node1 dan nod anaknya secara lalai. Kemudian kita boleh menetapkan defaultExpandedKeys kepada:

defaultExpandedKeys: ['node1']

Kod lengkap adalah seperti berikut:

<template>
  <a-tree :tree-data="treeData" :selected-keys="selectedKeys" :default-expanded-keys="defaultExpandedKeys"></a-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Node1',
          key: 'node1',
          children: [
            {
              title: 'Node1.1',
              key: 'node1-1',
              children: [
                {
                  title: 'Node1.1.1',
                  key: 'node1-1-1',
                  isLeaf: true
                },
                {
                  title: 'Node1.1.2',
                  key: 'node1-1-2',
                  isLeaf: true,
                  selected: true // 将该节点设置为默认选中
                }
              ]
            },
            {
              title: 'Node1.2',
              key: 'node1-2',
              isLeaf: true
            }
          ]
        },
        {
          title: 'Node2',
          key: 'node2',
          isLeaf: true
        }
      ],
      selectedKeys: [],
      defaultExpandedKeys: ['node1'] // 将node1设置为默认展开节点
    };
  },

  mounted() {
    this.selectedKeys = this.treeData.flatMap(node => {
      if (node.selected) {
        return node.key;
      } else if (node.children) {
        return node.children.flatMap(child => {
          if (child.selected) {
            return child.key;
          } else {
            return [];
          }
        });
      } else {
        return [];
      }
    });
  }
};
</script>

Ringkasan:

Tetapkan komponen Ant Design Vue’s Tree yang dipilih secara lalai melalui data Tandai nod yang dipilih dalam sumber dan petakannya kepada atribut selectedKeys dalam komponen. Pada masa yang sama, gunakan atribut defaultExpandedKeys untuk menetapkan nod dikembangkan lalai.

Atas ialah kandungan terperinci tetapan pokok antd vue dipilih secara lalai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!