import PickList from 'primevue/picklist';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/picklist/picklist.min.js"></script>
PickList requires a multidimensional array as its value bound with the v-model directive and a template for its content that gets the item instance and the index via slotProps.
<PickList v-model="cars" dataKey="vin">
<template #item="slotProps">
<div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
<div>
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
</div>
</div>
</template>
</PickList>
In addition to the mandatory "item" template, picklist provides "sourceheader" and "targetheader" slots to define content at header sections. Similarly custom content can be placed before and after the button controls for each section can be templates. View the slots section for more information.
<PickList v-model="cars" dataKey="vin">
<template #sourceheader>
Available
</template>
<template #targetheader>
Selected
</template>
<template #item="slotProps">
<div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
<div>
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
</div>
</div>
</template>
</PickList>
In case you need to access the selected items in the list, define a binding to the selection property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled, your changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.
<PickList v-model="cars" dataKey="vin" v-model:selection="selection">
<template #item="slotProps">
<div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
<div>
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
</div>
</div>
</template>
</PickList>
It is recommended to provide the name of the field that uniquely identifies the a record in the data via the dataKey property for better performance.
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | array | null | Value of the component as a multidimensional array. |
| selection | array | null | Selected items in the list as a multidimensional array. |
| metaKeySelection | boolean | true |
Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. |
| dataKey | string | null | Name of the field that uniquely identifies the a record in the data. |
| listStyle | object | null | Inline style of the the list element. |
| responsive | boolean | true | Whether the list optimizes layout based on screen size. |
| breakpoint | string | 960px | The breakpoint to define the maximum width boundary when responsiveness is enabled. |
| stripedRows | boolean | false | Whether to displays rows with alternating colors. |
| showSourceControls | boolean | true | Whether to show buttons of source list. |
| showTargetControls | boolean | true | Whether to show buttons of target list. |
| Name | Parameters | Description |
|---|---|---|
| reorder |
event.originalEvent: browser event event.value: Ordered list event.direction: Direction of the change; "up", "down", "bottom", "top" event.listIndex: Index of the list that is ordered, 0 represents the source and 1 represents the target list. |
Callback to invoke when the list is reordered. |
| move-to-target |
event.originalEvent: browser event event.items: Moved items |
Callback to invoke when one or more items are moved to the target list. |
| move-all-to-target |
event.originalEvent: browser event event.items: Moved items |
Callback to invoke when all items are moved to the target list. |
| move-to-source |
event.originalEvent: browser event event.items: Moved items |
Callback to invoke when one or more items are moved to the source list. |
| move-all-to-source |
event.originalEvent: browser event event.items: Moved items |
Callback to invoke when all items are moved to the source list. |
| selection-change |
event.originalEvent: browser event event.value: Selected item |
Callback to invoke when one or more items are moved to the other list. |
| Name | Parameters |
|---|---|
| header | - |
| item |
item: Item of the component index: Index of the item |
| sourceheader | - |
| targetheader | - |
| sourcecontrolsstart | - |
| sourcecontrolsend | - |
| movecontrolsstart | - |
| movecontrolsend | - |
| targetcontrolsstart | - |
| targetcontrolsend | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-picklist | Container element. |
| p-picklist-source-controls | Container of source list buttons. |
| p-picklist-target-controls | Container of target list buttons. |
| p-picklist-buttons | Container of buttons. |
| p-picklist-listwrapper | Parent of a list element. |
| p-picklist-list | List element. |
| p-picklist-item | An item in the list. |
None.