اسلات های با نام پویا در Vue 3

Summarize this content to 400 words in Persian Lang
من اخیراً یک پنل مدیریت را در یک پروژه شخصی مبتنی بر لاراول بازسازی کرده ام و آن را از نمای Blade “سنتی” به یک راه حل مبتنی بر اینرسی تبدیل کرده ام. به عنوان بخشی از این، من عناصر تکراری را شناسایی کرده ام که می توانند در اجزای Vue قابل استفاده مجدد استخراج شوند.

یکی از این مؤلفه ها جدولی است که رکوردها را فهرست می کند. در برنامه من، این را a نام گذاری کرده ام ResourceTable. اولین پاس من در این بود که فقط سرصفحه ها و آیتم ها را به عنوان ابزار ارسال می کردم. هدرها نقشه ای از نام ویژگی مدل و نام انسان پسند برای آن ویژگی ها بود. و آیتم ها مجموعه ای از مدل ها بود.

<script lang=”ts” setup>
defineProps<{
headers: Record<string, string>;
items: Record<string, any>[];
}>();
script>

<template>

v-bind:key=”key” v-for=”(value, key) in headers”>
scope=”col”>{{ value }}
template>

<template v-bind:key=”index” v-for=”(item, index) in items”>
v-bind:key=”key” v-for=”(value, key) in headers”>
{{ item[key] }}
template>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای هدر جدول، کامپوننت فقط حلقه می شود headers prop و خروجی مقدار در a element.
For the table body, the component loops over each item in the items prop، و سپس روی آن تکرار می شود headers دوباره برای چاپ مقدار مشخصه برای هر کلید هدر.

نمونه ای از استفاده از این کامپوننت به شکل زیر است:

v-bind:headers=”{
‘name’: ‘Name’,
‘birth_date’: ‘Birthday’
}”
v-bind:items=”[
{ ‘name’: ‘John Doe’, ‘birth_date’: null },
{ ‘name’: ‘Jane Doe’, ‘birth_date’: ‘1984-03-21’ },
{ ‘name’: ‘Joe Bloggs’, ‘birth_date’ null }
]”
/>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با این حال، داده ها همیشه لزوماً سازگار نیستند. به عنوان مثال، موارد فوق همه دارای یک birth_date ویژگی، اما مقدار ویژگی می تواند یک رشته یا null. رسیدگی به این موارد خوب است.

هندلینگ null ارزش ها

اولین موردی که رسیدگی کردم این بود null ارزش ها من تصمیم گرفتم یک خط تیره را با یک برچسب مفیدتر برای کسانی که از فناوری های کمکی مانند صفحه خوان استفاده می کنند، تولید کنم:

– {{ item[key] }}
+
+
+ —
+
+ {{ item[key] }}
+

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده از اسلات های پویا با نام برای هر سلول

در مرحله بعد، برای اینکه کنترل کاملی بر نحوه رندر کردن سلول‌ها داشته باشم، از شکافی با نام پویا استفاده کردم:

—

– {{ item[key] }}
+
+ {{ item.key }}
+

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای هر سلول، یک اسلات جدید تعریف شده است. بنابراین برای سلول ها برای ویژگی name، یک شکاف مربوط به نام وجود خواهد داشت cell(name).

اگر من از این شکاف ها در قالب خود استفاده نکنم، آنها فقط مقدار پیش فرض را مانند قبل دریافت می کنند. اما حالا اگر من انجام دهید با استفاده از این شکاف ها در قالب خود، می توانم کنترل کنم که مقدار نمایش داده شود. بنابراین برای birth_date مقادیر، ممکن است بخواهم مقداری قالب بندی انجام دهم یا از یک مؤلفه کاملاً متفاوت برای مدیریت رندر آن استفاده کنم:

– />
+ >
+
+
+
+

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

افزودن عملکردهای ردیف

در برنامه های کاربردی وب معمول است که هر ردیف دارای اقدامات مرتبط باشد، به عنوان مثال، آن رکورد را ویرایش کنید، آن رکورد را حذف کنید، و غیره. برای انجام این کار، من از یک شکاف اختیاری استفاده کردم. اگر من یک اسلات به نام تعریف کردم actions در قالب من، سپس به طور خودکار یک عنوان جدول جدید و یک سلول در انتهای هر سطر برای نگه داشتن اقدامات تعریف شده اضافه می کند:

{{ value }}
+
+ Actions
+

{{ item[key] }}

+
+
+
+
+

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را actions اسلات یک اسلات محدوده ای است که باعث می شود item موجود است، تا بتوانم از ویژگی های آن استفاده کنم، یعنی برای ساخت URL:

+
+
+
+

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

من اکنون یک جزء “جدول منبع” قابل استفاده مجدد دارم که به طور پیش فرض اکثر موارد را مدیریت می کند، اما همچنین به من این توانایی را می دهد که در صورت نیاز بر مقادیر سلول کنترل کامل داشته باشم.

در ادامه بخوانید

ECCV 2024 Redux: Tree-of-Life Meets AI

جیمی گوئررو – 21 نوامبر

ادغام جزء sg-json-table با Angular Application

سوداکار جورج – 21 نوامبر

ps، PID -9 را بکشید

01 سال – 22 نوامبر

ما مکانی هستیم که کدنویس ها به اشتراک می گذارند، به روز می مانند و حرفه خود را رشد می دهند.

<script lang="ts" setup>
defineProps<{
    headers: Record<string, string>;
    items: Record<string, any>[];
}>();
script>

<template>
    template>
            <templatev-bind:key="index"v-for="(item, index) in items">template>