Vue Lookup - Customize Item Appearance
For a minor customization of Lookup items, you can define specific fields in item data objects. For example, the following code generates three items: the first is not customized, the second is disabled and the third is hidden.
- <template>
- <DxLookup
- :data-source="dataSource"
- value-expr="text"
- display-expr="text"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxLookup } from 'devextreme-vue/lookup';
- export default {
- components: {
- DxLookup
- },
- data() {
- return {
- dataSource: [
- { text: 'HD Video Player' },
- { text: 'SuperHD Video Player', disabled: true },
- { text: 'SuperPlasma 50', visible: false }
- ]
- };
- }
- }
- </script>
If you need a more flexible solution, define an itemTemplate.
- <template>
- <DxLookup
- :data-source="dataSource"
- value-expr="id"
- item-template="item">
- <template #item="{ data, index }">
- <div>
- <img :src="data.imgSrc"/>
- <div
- :style="{'display': 'inline-block', 'font-style': index % 2 === 0 ? 'italic' : 'normal'}">
- {{data.name}}
- </div>
- </div>
- </template>
- </DxLookup>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxLookup } from 'devextreme-vue/lookup';
- export default {
- components: {
- DxLookup
- },
- data() {
- return {
- dataSource: [{
- id: 1,
- name: "HD Video Player",
- imgSrc: "images/products/1-small.png"
- }, {
- id: 2,
- name: "UltraHD Player",
- imgSrc: "images/products/2-small.png"
- },
- // ...
- ]
- };
- }
- }
- </script>
Using similar techniques, you can customize the input field of the Lookup. The template for it should be assigned to the fieldTemplate property.
- <template>
- <DxLookup
- :data-source="dataSource"
- value-expr="id"
- display-expr="name"
- field-template="fieldInput">
- <template #fieldInput="{ data }">
- <img :src="data && data.imgSrc"/>
- </template>
- </DxLookup>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxLookup } from 'devextreme-vue/lookup';
- export default {
- components: {
- DxLookup
- },
- data() {
- return {
- dataSource: [{
- id: 1,
- name: "HD Video Player",
- imgSrc: "images/products/1-small.png"
- }, {
- id: 2,
- name: "UltraHD Player",
- imgSrc: "images/products/2-small.png"
- },
- // ...
- ]
- };
- }
- }
- </script>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.