اختيار شجري TreeSelect

مكوّن اختيار شجري. يعيد استخدام منطق التوسيط / التحديد الخاص بـ LhTree؛ في الوضع أحادي الاختيار يؤدي النقر الأول على عقدة أبوية إلى توسيعها فقط (وتُحدَّد بالنقر مرة ثانية)، بينما يُحدَّد الفرع مباشرة، وفي وضع الاختيار المتعدد تُستخدم مربعات الاختيار؛ وتُحمَّل اللوحة افتراضيًا على body (لا يوجد Teleport في Vue2).

اختيار شجري

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhTreeSelect v-model="single" :data="data" placeholder="اختيار فردي (انقر على العقدة الأبوية لتوسيعها، وعلى الفرع للتحديد)" />
      <LhTreeSelect v-model="single" :data="data" disabled placeholder="معطّل" />
      <LhTreeSelect v-model="multi" :data="data" multiple placeholder="اختيار متعدد (مربعات الاختيار)" />
    </div>
    <LhTreeSelect v-model="embedded" :data="data" :teleported="false" placeholder="teleported=false لوحة مضمَّنة" />
    <p class="demo-note">
      فردي: {{ single || '(غير محدد)' }}؛ متعدد: {{ multi.join('، ') || '(غير محدد)' }}؛ مضمَّن: {{
        embedded || '(غير محدد)'
      }}
    </p>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: 'xishan',
    multi: [],
    embedded: '',
    data: [
      {
        key: 'song',
        label: 'سلالة سونغ',
        children: [
          { key: 'fan', label: 'فان كوان' },
          { key: 'xishan', label: 'المسافرون بين الجبال والوديان' },
        ],
      },
      { key: 'yuan', label: 'سلالة يوان', children: [{ key: 'huang', label: 'هوانغ غونغوانغ' }] },
    ],
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
data	بيانات الشجرة	LhTreeNode[]	[]
v-model	القيمة الحالية؛ فردي يكون سلسلة مفتاح، ومتعدد مصفوفة مفاتيح مختارة	string \| string[]	—
multiple	اختيار متعدد (تُعرض مربعات الاختيار، والقيمة مصفوفة مفاتيح)	boolean	false
disabled	معطّل	boolean	false
placeholder	نص العنصر النائب	string	حزمة اللغة
teleported	ما إذا كانت اللوحة تُحمَّل على body	boolean	true
sx	خاصية sx المختصرة للتخطيط	—	—

Events

input (v-model), change (value)

إمكانية الوصول

العنصر المُشغِّل role="combobox" + aria-expanded، وتُورَّث دلالات role="tree" / role="treeitem" الخاصة بـ LhTree داخل اللوحة؛ في وضع الاختيار المتعدد تُضبط مربعات الاختيار بـ aria-checked، مع دعم كامل للتنقّل بلوحة المفاتيح.