How to use Vue and Element-UI to implement multi-level linkage drop-down box function

How to use Vue and Element-UI to implement multi-level linkage drop-down box function

Introduction:
In Web development, multi-level linkage drop-down box is a common interaction method. By selecting an option in a drop-down box, the contents of subsequent drop-down boxes can be dynamically changed. This article will introduce how to use Vue and Element-UI to implement this function, and provide code examples.

1. Preparation
First, we need to ensure that Vue and Element-UI have been installed. You can install it through the following command:

npm install vue
npm install element-ui

2. Data preparation
To implement multi-level linkage drop-down boxes, we need to prepare the corresponding data. Suppose we have a data collection of car brands and car models. The data structure is as follows:

brands: [
    {
        id: 1,
        name: '奥迪',
        models: [
            {
                id: 1,
                name: 'A4'
            },
            {
                id: 2,
                name: 'A6'
            }
        ]
    },
    {
        id: 2,
        name: '宝马',
        models: [
            {
                id: 3,
                name: 'X3'
            },
            {
                id: 4,
                name: 'X5'
            }
        ]
    }
]

3. Writing Vue components
We can create a Vue component named Cascader to implement the multi-level linkage drop-down box function. The code is as follows:

<template>
  <div>
    <el-cascader
      :options="brands"
      v-model="selectedValues"
      @change="handleChange"
      :props="{ value: 'id', label: 'name', children: 'models' }"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brands: [...], // 编辑为上面提到的数据结构
      selectedValues: []
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

In the above code, we use the Cascader component of Element-UI. By setting the options attribute to brands, we pass the car brand data to the drop-down box. The v-model directive is used to two-way bind the value selected by the user. The @change event can monitor user selection changes. In the handleChange method we can handle the value selected by the user.

4. Rendering Component
To render our component into the page, we need to introduce and register the Cascader component in the Vue instance. The code is as follows:

import Vue from 'vue';
import Cascader from './Cascader.vue';

new Vue({
  render: (h) => h(Cascader)
}).$mount('#app');

5. Practical Application
The above code is just a simple example. In actual application, we may need to dynamically load the corresponding car model according to the brand selected by the user. The following is the code for a complete example:

<template>
  <div>
    <el-cascader
      :options="brands"
      v-model="selectedValues"
      @change="handleChange"
      :props="{ value: 'id', label: 'name', children: 'models' }"
    ></el-cascader>
    <el-cascader
      v-if="selectedValues[0]"
      :options="getBrandById(selectedValues[0]).models"
      v-model="selectedValues[1]"
      @change="handleChange"
      :props="{ value: 'id', label: 'name' }"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brands: [...], // 编辑为上面提到的数据结构
      selectedValues: []
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    getBrandById(id) {
      return this.brands.find((brand) => brand.id === id);
    }
  }
};
</script>

In the above code, we dynamically load the corresponding car model based on the brand selected by the user. When the user selects a brand, the second drop-down box will be rendered based on the models attribute of the selected brand.

6. Summary
Through the cooperation of Vue and Element-UI, we can easily realize the multi-level linkage drop-down box function. First prepare the data, and then use the Cascader component to achieve the linkage effect by setting the props attribute and listening to the change event. The above is the detailed description and sample code on how to use Vue and Element-UI to implement the multi-level linkage drop-down box function.

The above is the detailed content of How to use Vue and Element-UI to implement multi-level linkage drop-down box function. For more information, please follow other related articles on the PHP Chinese website!