element联级选择器（获取省市地区）后台动态获取

最新推荐文章于 2023-08-09 11:22:52 发布

dearqz

最新推荐文章于 2023-08-09 11:22:52 发布

阅读量3.8k

点赞数 1

分类专栏： vue 文章标签： element 动态联级选择器获取省市地区

本文链接：https://blog.csdn.net/weixin_42204698/article/details/102891099

版权

本文介绍如何使用Element UI动态展示联级选择器，以获取省市地区为例。通过点击省份，动态从后台接口获取并展示市地区数据。利用`el-cascader`组件的属性配置，并在点击事件中更新子级选项，最终得到选定的省市信息。

摘要由CSDN通过智能技术生成

如何根据后台接口数据动态展示联级选择器，本文章以获取省市地区为例进行说明
通过点击省地区动态获取市地区
首先，看一下element联级选择器长啥样：

<el-cascader :options="options" v-model="value" clearable></el-cascader>

<script>
  export default {
   
    data() {
   
      return {
   
        value: '',
        options: [{
   
          value: 'zhinan',
          label: '指南',
          children: [{
   
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
   
              value: 'yizhi',
              label: '一致'
            }, {
   
              value: 'fankui',
              label: '反馈'
            }, {
   
              value: 'xiaolv',
              label: '效率'
            }, {
   
              value: 'kekong',
              label