جدول Table

جدول بيانات. يدعم الفرز (متحكمًا به / غير متحكَّم به)، وفلترة الأعمدة، وسحب عرض العمود، والترويسات متعددة المستويات (تضمين children بلا حدود)، والأعمدة الثابتة؛ وعند ضبط height يُفعَّل التمرير الافتراضي (rowHeight يجب أن يطابق ارتفاع الصف الفعلي).

جدول

<template>
  <div style="max-width: 760px">
    <p class="demo-note">size="small" + maxHeight + فرز افتراضي (defaultSortProp/defaultSortOrder) + فلترة</p>
    <LhTable
      :data="rows"
      :columns="columns"
      size="small"
      stripe
      border
      :max-height="200"
      row-key="name"
      default-sort-prop="dynasty"
      default-sort-order="asc"
      :default-filtered-values="{ dynasty: ['سونغ'] }"
    >
      <template #price="{ value }">
        <span style="color: var(--lh-primary-color); font-weight: 600">{{ value }}</span>
      </template>
    </LhTable>
    <p class="demo-note">عمود «السلالة» مُرتَّب تصاعديًا افتراضيًا ومُفلتر مسبقًا بـ«سونغ»؛ زر الفلترة في الترويسة يتيح تغيير الشرط.</p>
    <p class="demo-note" style="margin-top: 16px">ترويسة متداخلة (children) + سحب العرض resizable + formatter + sorter مخصص</p>
    <LhTable :data="rows2" :columns="groupColumns" border :height="180" :row-height="40" :sorter="dynastySorter">
      <template #price="{ value }">
        <span style="color: var(--lh-primary-color); font-weight: 600">{{ value }}</span>
      </template>
    </LhTable>
    <p class="demo-note">عمود «المنشأ» يُنسَّق عبر formatter إلى «محفوظ في القصر / شعبي»؛ وعمود «التقييم» قابل لسحب العرض (resizable).</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    rows: [
      { name: 'المسافرون بين الجبال والوديان', dynasty: 'سونغ', price: 1800 },
      { name: 'الإقامة في جبال فوتشون', dynasty: 'يوان', price: 2600 },
      { name: 'ألف ميل من الأنهار والجبال', dynasty: 'سونغ', price: 3200 },
      { name: 'على ضفاف النهر في تشينغ مينغ', dynasty: 'سونغ', price: 1500 },
      { name: 'مأدبة هان شي زاي الليلية', dynasty: 'السلالات الخمس', price: 2100 },
    ],
    rows2: [
      { name: 'المسافرون بين الجبال والوديان', dynasty: 'سونغ', provenance: 'محفوظ في القصر', price: 1800 },
      { name: 'الإقامة في جبال فوتشون', dynasty: 'يوان', provenance: 'محفوظ في القصر', price: 2600 },
      { name: 'على ضفاف النهر في تشينغ مينغ', dynasty: 'سونغ', provenance: 'محفوظ في القصر', price: 1500 },
      { name: 'الحصان الأبيض الساطع ليلًا', dynasty: 'تانغ', provenance: 'شعبي', price: 980 },
    ],
    columns: [
      { prop: 'name', label: 'اللوحة', width: 160 },
      {
        prop: 'dynasty',
        label: 'السلالة',
        width: 120,
        sortable: true,
        filters: [
          { text: 'سونغ', value: 'سونغ' },
          { text: 'يوان', value: 'يوان' },
          { text: 'السلالات الخمس', value: 'السلالات الخمس' },
        ],
      },
      { prop: 'price', label: 'التقييم (عشر آلاف)', width: 140, align: 'right', slot: 'price' },
    ],
    groupColumns: [
      {
        label: 'معلومات المقتنيات',
        children: [
          { prop: 'name', label: 'اللوحة', width: 150 },
          {
            prop: 'provenance',
            label: 'المنشأ',
            width: 100,
            formatter: (r) => (r.provenance === 'محفوظ في القصر' ? 'محفوظ في القصر' : 'شعبي'),
          },
        ],
      },
      {
        label: 'التقييم',
        children: [
          { prop: 'dynasty', label: 'السلالة', width: 90, sortable: true },
          { prop: 'price', label: 'التقييم (عشر آلاف)', width: 130, align: 'right', resizable: true, slot: 'price' },
        ],
      },
    ],
  }),
  methods: {
    dynastySorter(a, b) {
      const order = ['تانغ', 'السلالات الخمس', 'سونغ', 'يوان']
      return order.indexOf(String(a.dynasty)) - order.indexOf(String(b.dynasty))
    },
  },
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
data	بيانات الصفوف	LhTableRow[]	[]
columns	إعداد الأعمدة	LhTableColumn[]	[]
height	ارتفاع جسم الجدول (ضبطه يُفعِّل التمرير الافتراضي؛ الرقم بوحدة px)	number \| string	—
maxHeight	أقصى ارتفاع في الوضع غير الافتراضي	number \| string	—
rowHeight	ارتفاع الصف في التمرير الافتراضي (يجب أن يطابق الارتفاع الفعلي)	number	—
stripe / border	خطوط السرد / حدود الخلايا	boolean	false
size	الحجم	'small' \| 'default' \| 'large'	'default'
rowKey	اسم حقل مفتاح الصف	string	—
defaultSortProp / defaultSortOrder	عمود الفرز الافتراضي / الاتجاه	string / LhTableSortOrder	—
sorter	دالة فرز مخصصة	(a, b) => number	—
resizable	تفعيل سحب عرض العمود (يتطلب أيضًا resizable على مستوى العمود، وأن يكون للعمود width رقمي)	boolean	false
defaultFilteredValues	حالة الفلترة الافتراضية (غير متحكَّم بها، والمفاتيح هي prop الخاص بالعمود)	Record<string, (string \| number)[]>	—
filteredValues	حالة الفلترة المتحكَّم بها (:filtered-values.sync)	Record<string, (string \| number)[]>	—
sx	خاصية sx المختصرة للتخطيط	—	—

Events

sortChange ({ prop, order }) و filterChange ({ prop, values }) و columnResize ({ prop, width }) و update:filteredValues و rowClick (row, index)

Slots

فتحة	الوصف
<اسم slot العمود>	خلية مخصصة، مع المعاملات النطاقية { row, column, index, value } (يُحدَّد العمود عبر column.slot)
empty	المحتوى عند انعدام البيانات (الافتراضي: 「暂无数据」)

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

الترويسة role="row" + aria-sort للأعمدة القابلة للفرز، وجسم الجدول role="row"؛ لوحة الفلترة role="menu"، ومقابض سحب العرض تحمل aria-label و tabindex، مع دعم ضبط العرض عبر لوحة المفاتيح.