当前位置：首页 > article >正文

Vue 3结合Element Plus中，实现一个级联选择器（Cascader）来展示省市区

article 2024/9/21 8:15:40

在Vue 3结合Element Plus中，实现一个级联选择器（Cascader）来展示省市区（甚至到更细分的级别，如街道、小区等）的联动选择是一个常见的需求。Element Plus的Cascader组件非常适合这样的场景，因为它支持多级联动。

以下是一个基本的步骤和示例，说明如何在Vue 3项目中使用Element Plus的Cascader组件来实现省市区（甚至更多级）的联动选择。

步骤 1: 安装Vue 3和Element Plus

首先，确保你的项目中已经安装了Vue 3和Element Plus。如果没有，可以通过npm或yarn来安装它们。

npm install vue@next 
npm install element-plus 
# 或者 
yarn add vue@next 
yarn add element-plus

步骤 2: 引入Element Plus到项目中

在你的Vue项目中，通常会在main.js或main.ts中全局引入Element Plus及其样式。

import { createApp } from 'vue' 
import App from './App.vue' 
import ElementPlus from 'element-plus' 
import 'element-plus/dist/index.css' 


const app = createApp(App) 
app.use(ElementPlus) 
app.mount('#app')

步骤 3: 准备数据

准备你的省市区数据。数据应该是一个嵌套的数组，每个级别都包含子级别的数据。

const options = [  
  {  
    value: 'zhejiang',  
    label: '浙江',  
    children: [  
      {  
        value: 'hangzhou',  
        label: '杭州',  
        children: [  
          {  
            value: 'xihu',  
            label: '西湖区',  
            // 可以继续添加更细分的区域  
          },  
          // ...其他区  
        ],  
      },  
      // ...其他市  
    ],  
  },  
  // ...其他省  
];

步骤 4: 在组件中使用Cascader

在你的Vue组件中，使用<el-cascader>标签，并绑定options数据。

<template>  
  <el-cascader  
    v-model="selectedOptions"  
    :options="options"  
    @change="handleChange"  
    clearable  
    collapse-tags  
  ></el-cascader>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  setup() {  
    const selectedOptions = ref([]); // 用于存储选中的选项  
    const options = ref([  
      // 前面定义的options数据  
    ]);  
  
    function handleChange(value, selectedData) {  
      console.log(value, selectedData);  
    }  
  
    return {  
      selectedOptions,  
      options,  
      handleChange,  
    };  
  },  
};  
</script>