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>

View Demo

See Also