Tree 樹狀元件

樹狀展示與選擇。支援勾選框（預設父子級聯 + 半選，checkStrictly 解除聯動）、多選、延遲載入（展開未載入節點時調 load）；受控鍵三件套均走 .sync。

樹狀元件

<template>
  <div class="demo-col" style="max-width: 320px">
    <p class="demo-note">複選 + checkStrictly（父子不關聯）+ 預設展開/選中/勾選鍵</p>
    <LhTree
      :data="data"
      show-checkbox
      check-strictly
      :default-expanded-keys="['song']"
      :default-selected-keys="['xishan']"
      :default-checked-keys="['libai']"
      :expand-on-click-node="false"
      @select="onSelect"
      @check="onCheck"
    />
    <p class="demo-note">點選選中：{{ selected }}；勾選鍵：{{ checked.join('、') || '（無）' }}</p>
    <p class="demo-note">multiple 多選 + disabled 停用整棵</p>
    <LhTree :data="data" multiple disabled :default-expanded-keys="['tang']" @select="onSelectMulti" />
    <p class="demo-note">多選結果：{{ multi.join('、') || '（無）' }}</p>
    <p class="demo-note">受控鍵：expandedKeys / selectedKeys / checkedKeys</p>
    <LhTree
      :data="data"
      show-checkbox
      :expanded-keys="['song']"
      :selected-keys="['guo']"
      :checked-keys="['xishan']"
      @select="onSelect"
    />
    <p class="demo-note">lazy 延遲載入（點選展開時調 load 拉子節點）</p>
    <LhTree :data="lazyData" lazy :load="onLoad" :default-expanded-keys="['root']" />
  </div>
</template>

<script>
export default {
  data: () => ({
    selected: '（無）',
    checked: [],
    multi: [],
    data: [
      {
        key: 'tang',
        label: '唐代',
        children: [
          { key: 'wangwei', label: '王維' },
          { key: 'libai', label: '李白' },
        ],
      },
      {
        key: 'song',
        label: '宋代',
        children: [
          {
            key: 'fan',
            label: '范寬',
            children: [{ key: 'xishan', label: '溪山行旅圖' }],
          },
          { key: 'guo', label: '郭熙' },
        ],
      },
    ],
    lazyData: [{ key: 'root', label: '畫科（點選展開延遲載入）' }],
  }),
  methods: {
    onSelect(key) {
      this.selected = String(key)
    },
    onCheck(keys) {
      this.checked = Array.isArray(keys) ? keys : []
    },
    onSelectMulti(keys) {
      this.multi = Array.isArray(keys) ? keys : [String(keys)]
    },
    onLoad(node, resolve) {
      setTimeout(() => {
        var _a, _b
        resolve([
          { key: `${String((_a = node.key) !== null && _a !== void 0 ? _a : '')}-a`, label: '山水' },
          { key: `${String((_b = node.key) !== null && _b !== void 0 ? _b : '')}-b`, label: '花鳥' },
        ])
      }, 400)
    },
  },
}
</script>

Props

屬性	說明	類型	預設值
data	樹資料	LhTreeNode[]	[]
showCheckbox	顯示勾選框	boolean	false
multiple	多選（點選節點切換選中而非替換）	boolean	false
expandOnClickNode	點選非葉節點時展開 / 收起	boolean	false
defaultExpandedKeys / expandedKeys	預設展開 / 受控展開的鍵	string[]	—
defaultSelectedKeys / selectedKeys	預設選中 / 受控選中的鍵	string[]	—
defaultCheckedKeys / checkedKeys	預設勾選 / 受控勾選的鍵	string[]	—
checkStrictly	父子勾選不聯動（無級聯與半選）	boolean	false
lazy	延遲載入：展開未載入的非葉節點時調 load	boolean	false
load	延遲載入回呼，resolve(children) 提交並展開、reject() 取消	(node, resolve, reject) => void	—
disabled	整體停用	boolean	false
sx	sx 快速佈局屬性	—	—

Events

update:expandedKeys、update:selectedKeys、update:checkedKeys（均 .sync）、 expand (key, isExpanded)、select (key, node)、check (keys, node)、nodeLoad (node, children)

Slots

插槽	說明
node	節點標籤，作用域參數 { node, level, expanded, selected }
empty	無資料時內容（預設「暫無資料」）

無障礙

節點 role="treeitem" + aria-expanded（可展開節點）+ aria-selected / aria-checked； 容器 role="tree"，支援方向鍵上下移動、左右展開收起、空格勾選、Enter 選中。