Getting Started with the Vue MultiColumn ComboBox Component in Vue 2

30 Jul 20267 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion® Vue MultiColumn ComboBox component.

Prerequisites

System requirements for Syncfusion® Vue UI components

Setup the Vue 2 project

Easily set up a Vue 2 application using Vue CLI, which provides a reliable development environment, a streamlined project structure, and optimized builds compared to older setup tools. For detailed steps, refer to the Vue CLI installation instructions.

Note: To create a Vue 2 application using Vue CLI, refer to this documentation for more details.

To create a new Vue 2 application, run the following commands based on your preferred package manager:

npm install -g @vue/cli
vue create quickstart

or

yarn global add @vue/cli
vue create quickstart

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → Default ([Vue 2] babel, eslint)
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Navigate to the project directory:

cd quickstart

Adding Vue MultiColumn ComboBox package

To install the Vue MultiColumn ComboBox package, use the following command:

npm install @syncfusion/ej2-vue-multicolumn-combobox

or

yarn add @syncfusion/ej2-vue-multicolumn-combobox

Adding CSS reference

Themes for Syncfusion® MultiColumn ComboBox component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/App.vue file:

<style>
  @import "../node_modules/@syncfusion/ej2-material3-theme/styles/multicolumn-combobox/index.css";
</style>

You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on referring themes through npm packages.

Adding MultiColumn ComboBox component

Now, you can add the Vue MultiColumn ComboBox component to your src/App.vue file by importing and defining it within your application. After initializing, populate the MultiColumn ComboBox with data by using the dataSource property, to map the data for each specified columns use the <e-column> selector and the fields property to map the data fields from the dataSource.

<template>
    <div id="app">
        <div id='container' style="margin:50px auto 0; width:250px;">
            <br>
            <ejs-multicolumncombobox id='multicolumn' :dataSource='employeeData' :fields='fields'
                placeholder='Select a employee'>
                <e-columns>
                    <e-column field='EmpID' header='Employee ID' width='70'></e-column>
                    <e-column field='Name' header='Name' width='80'></e-column>
                    <e-column field='Designation' header='Designation' width='60'></e-column>
                    <e-column field='Country' header='Country' width='80'></e-column>
                </e-columns>
            </ejs-multicolumncombobox>
        </div>
    </div>
</template>

<script>
    import {MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective} from "@syncfusion/ej2-vue-multicolumn-combobox";

    export default {
        components: {
            'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
            'e-columns': ColumnsDirective,
            'e-column': ColumnDirective,
        },
        data() {
            return {
                employeeData: [
                    {"EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England"},
                    {"EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA"},
                    {"EmpID": 1003, "Name": "John", "Designation": "Tester", "Country": "Germany"},
                    {"EmpID": 1004, "Name": "Robert King", "Designation": "Product Manager", "Country": "India"},
                    {"EmpID": 1005, "Name": "Steven Buchanan", "Designation": "Developer", "Country": "Italy"},
                    {"EmpID": 1006, "Name": "Jane Smith", "Designation": "Developer", "Country": "Europe"},
                    {"EmpID": 1007, "Name": "James Brown", "Designation": "Developer", "Country": "Australia"},
                    {"EmpID": 1008, "Name": "Laura Callahan", "Designation": "Developer", "Country": "Africa"},
                    {"EmpID": 1009, "Name": "Mario Pontes", "Designation": "Developer", "Country": "Russia"}
                ],
                fields: {text: 'Name', value: 'EmpID'};
            }
        }
    }
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/multicolumn-combobox/index.css";
</style>

Run the application

To run the application, use the following command:

npm run dev

or

yarn run serve

The output will appear as follows:

You can refer to our Vue MultiColumn ComboBox feature tour page for its groundbreaking feature representations. You can also explore our Vue MultiColumn ComboBox example that shows how to render the MultiColumn ComboBox in Vue.

See also