element-ui组件实现三级联动

最新推荐文章于 2024-07-18 10:57:21 发布

XiaoDengll

最新推荐文章于 2024-07-18 10:57:21 发布

阅读量376

点赞数

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/quangelixi/article/details/131067120

版权

这段代码展示了如何在Vue.js中使用el-select组件创建一个省市区三级联动的选择器。数据结构包括省份、城市和区，并通过v-model和v-for指令动态绑定选项，根据选择的省份和城市更新区的选择项。

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

<template>
  <div class="demo_box">
    <!-- 省 -->
    <el-select v-model="provinceVal" class="province">
      <el-option v-for="item in proOptions" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <!-- 市  通过cityOptions[provinceVal]来展示当前省里面的市-->
    <el-select v-model="cityVal" class="city">
      <el-option v-for="item in cityOptions[provinceVal]" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <!-- 区 同理areaOptions[provinceVal][cityVal]来展示当前省市里面的区-->
    <el-select v-model="areaVal" class="area">
      <el-option v-for="item in areaOptions[provinceVal][cityVal]" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'DemoBox',
  data () {
    return {
      // 省份
      proOptions: [
        {
          value: '0',
          label: '浙江省'
        },
        {
          value: '1',
          label: '江西省'
        },
        {
          value: '2',
          label: '湖南省'
        },
        {
          value: '3',
          label: '广东省'
        },
        {
          value: '4',
          label: '福建省'
        },
        {
          value: '5',
          label: '四川省'
        },
        {
          value: '6',
          label: '贵州省'
        },
        {
          value: '7',
          label: '山东省'
        },
        {
          value: '8',
          label: '云南省'
        }
      ],
      // 保存选中省份的值
      provinceVal: '0',
      // 市
      cityOptions: [
        // 浙江的市
        [
          {
            value: '0',
            label: '宁波市'
          },
          {
            value: '1',
            label: '杭州市'
          },
          {
            value: '2',
            label: '温州市'
          },
          {
            value: '3',
            label: '嘉兴市'
          },
          {
            value: '4',
            label: '湖州市'
          },
          {
            value: '5',
            label: '绍兴市'
          },
          {
            value: '6',
            label: '金华市'
          },
          {
            value: '7',
            label: '衢州市'
          },
          {
            value: '8',
            label: '舟山市'
          }
        ],
        // 江西的市
        [
          {
            value: '0',
            label: '南昌市'
          },
          {
            value: '1',
            label: '景德镇市'
          },
          {
            value: '2',
            label: '吉安市'
          }
        ]
      ],
      // 保存市的值
      cityVal: '0',
      // 区
      areaOptions: [
        // 浙江的市
        [
          // 宁波的区
          [
            {
              value: '0',
              label: '奉化区'
            },
            {
              value: '1',
              label: '海曙区'
            },
            {
              value: '2',
              label: '江北区'
            },
            {
              value: '3',
              label: '北仑区'
            },
            {
              value: '4',
              label: '镇海区'
            },
            {
              value: '5',
              label: '鄞州区'
            }
          ],
          // 杭州的区
          [
            {
              value: '0',
              label: '上城区'
            },
            {
              value: '1',
              label: '墅区拱'
            },
            {
              value: '2',
              label: '西湖区'
            },
            {
              value: '3',
              label: '滨江区'
            },
            {
              value: '4',
              label: '萧山区'
            },
            {
              value: '5',
              label: '余杭区'
            },
            {
              value: '6',
              label: '临平区'
            },
            {
              value: '7',
              label: '钱塘区'
            }
          ]
        ],
        // 江西的市
        [
          // 南昌的区
          [
            {
              value: '0',
              label: '安义县'
            },
            {
              value: '1',
              label: '南昌县'
            },
            {
              value: '2',
              label: '青山湖区'
            }
          ],
          // 景德镇市的区
          [
            {
              value: '0',
              label: '昌江区'
            },
            {
              value: '1',
              label: '珠山区'
            },
            {
              value: '2',
              label: '浮梁县'
            }
          ]
        ]
      ],
      // 保存选中的区
      areaVal: '0'
    }
  }
}
</script>

<style>
</style>