یکی از عناصر پرکاربرد html، عنصر select است. این عنصر برای انتخاب کردن عناصر از یک لیست استفاده می شود. اما این عنصر دارای دو محدودیت است اول این که در عنصر پیش فرض select نمی توان عمل جستجو را انجام داد. زمانی که تعداد عناصر لیست از حدی بیشتر شود پیمایش کردن لیست و یافتن عنصر دشوار است در این شرایط اگر امکان فیلتر وجود داشته باشد با تایپ قسمتی از عبارت لیست فیلتر می شود. دومین مشکل عنصر select این است که امکان انتخاب همزمان چند عنصر وجود ندارد. با استفاده از عنصر multiselect این دو محدودیت برطرف شده و قابلیت های دیگری نیز به آن اضافه شده است.
در این پست نحوه استفاده از این عنصر را در یک مثال بیان می کنیم.
نصب بسته multiselect
برای نصب بسته دستور زیر را در خط فرمان اجرا کنید:
npm install vue-multiselect --save
مثال:
پس از نصب بسته می توانید از این عنصر استفاده کنید به کد زیر توجه کنید:
۱- برای استفاده از این عنصر از تگ multiselect استفاده کنید.
۲- گزینه v-model : متغییری که عناصر انتخاب شده لیست در آن ذخیره می شود
۳-گزینه option: ارایه ای از اشیا که عناصر لیست را تشکیل می دهد.
۴- گزینه multiple: در صورتی که مقدار true بگیرد امکان انتخاب چند عنصر را ممکن می سازد.
۵- گزینه track-by: فیلدی از لیست که جستجو بر روی ان انجام می شود در این مثال هر عنصر دارای دو مقدار name و language است. در این گزینه تعیین می کنیم کاربر با تایپ در عنصر جستجو بر روی کدان فیلد باید انجام شود.
در خط ۲۰ - کتابخانه به برنامه وارد می شود
خط ۲۵- متغییر value که یک آرایه است تعریف می شود این آرایه برای ذخیره کردن عناصر انتخاب شده تگ می باشد.
خط ۲۶- متغییر options آرایه ای از عناصر را دریافت می کند هر کدام از این عناصر یک سطر از عنصر select را مشخص می کند.
منبع
برای مطالعه بیشتر می توانید به آدرس زیر مراجعه کنید:
فایل این پست در آدرس زیر قرار دارد:
