شجرة 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"، مع دعم التنقّل بين العقد بمفاتيح الأسهم عموديًا، والتوسيع والطي أفقيًا، وتحديدها بمفتاح المسافة، واختيارها بمفتاح الإدخال.