编写一个html页面 使用 vue版本是2版本 elementui组件 里面包括一个二级联动 一级下拉框为单选 二级下来框为多选一个三级联动 一级下拉框为单选 二级下拉框多选 三级下拉框多选

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 2.x ElementUI 二级联动和三级联动示例</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <h2>二级联动</h2>
    <el-select v-model="selectedProvince" placeholder="请选择省份" @change="handleProvinceChange">
      <el-option v-for="province in provinces" :key="province.value" :label="province.label" :value="province.value"></el-option>
    </el-select>
    <el-select v-model="selectedCity" placeholder="请选择城市">
      <el-option v-for="city in cities" :key="city.value" :label="city.label" :value="city.value"></el-option>
    </el-select>
<pre><code>&lt;h2&gt;三级联动&lt;/h2&gt;
&lt;el-select v-model=&quot;selectedRegion&quot; placeholder=&quot;请选择地区&quot; @change=&quot;handleRegionChange&quot;&gt;
  &lt;el-option v-for=&quot;region in regions&quot; :key=&quot;region.value&quot; :label=&quot;region.label&quot; :value=&quot;region.value&quot;&gt;&lt;/el-option&gt;
&lt;/el-select&gt;
&lt;el-select v-model=&quot;selectedStreet&quot; placeholder=&quot;请选择街道&quot;&gt;
  &lt;el-option v-for=&quot;street in streets&quot; :key=&quot;street.value&quot; :label=&quot;street.label&quot; :value=&quot;street.value&quot;&gt;&lt;/el-option&gt;
&lt;/el-select&gt;
&lt;el-select v-model=&quot;selectedCommunity&quot; placeholder=&quot;请选择社区&quot;&gt;
  &lt;el-option v-for=&quot;community in communities&quot; :key=&quot;community.value&quot; :label=&quot;community.label&quot; :value=&quot;community.value&quot;&gt;&lt;/el-option&gt;
&lt;/el-select&gt;
</code></pre>
  </div>
  <!-- 引入 Vue 和 ElementUI -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        // 二级联动数据
        selectedProvince: '',
        selectedCity: '',
        provinces: [
          {value: '广东', label: '广东'},
          {value: '湖南', label: '湖南'},
          {value: '福建', label: '福建'}
        ],
        cities: [
          {value: '广州', label: '广州', parent: '广东'},
          {value: '深圳', label: '深圳', parent: '广东'},
          {value: '长沙', label: '长沙', parent: '湖南'},
          {value: '厦门', label: '厦门', parent: '福建'}
        ],

        // 三级联动数据
        selectedRegion: '',
        selectedStreet: '',
        selectedCommunity: '',
        regions: [
          {value: '广东', label: '广东'},
          {value: '湖南', label: '湖南'},
          {value: '福建', label: '福建'}
        ],
        streets: [
          {value: '广州', label: '广州', parent: '广东'},
          {value: '深圳', label: '深圳', parent: '广东'},
          {value: '长沙', label: '长沙', parent: '湖南'},
          {value: '厦门', label: '厦门', parent: '福建'}
        ],
        communities: [
          {value: '天河区', label: '天河区', parent: '广州'},
          {value: '海珠区', label: '海珠区', parent: '广州'},
          {value: '南山区', label: '南山区', parent: '深圳'},
          {value: '岳麓区', label: '岳麓区', parent: '长沙'},
          {value: '思明区', label: '思明区', parent: '厦门'}
        ]
      },
      methods: {
        // 处理二级联动
        handleProvinceChange: function() {
          this.selectedCity = ''
          this.cities = [
            {value: '广州', label: '广州', parent: '广东'},
            {value: '深圳', label: '深圳', parent: '广东'},
            {value: '长沙', label: '长沙', parent: '湖南'},
            {value: '厦门', label: '厦门', parent: '福建'}
          ].filter(city => city.parent === this.selectedProvince)
        },
        // 处理三级联动
        handleRegionChange: function() {
          this.selectedStreet = ''
          this.selectedCommunity = ''
          this.streets = [
            {value: '广州', label: '广州', parent: '广东'},
            {value: '深圳', label: '深圳', parent: '广东'},
            {value: '长沙', label: '长沙', parent: '湖南'},
            {value: '厦门', label: '厦门', parent: '福建'}
          ].filter(street => street.parent === this.selectedRegion)
          this.communities = [
            {value: '天河区', label: '天河区', parent: '广州'},
            {value: '海珠区', label: '海珠区', parent: '广州'},
            {value: '南山区', label: '南山区', parent: '深圳'},
            {value: '岳麓区', label: '岳麓区', parent: '长沙'},
            {value: '思明区', label: '思明区', parent: '厦门'}
          ].filter(community => community.parent === this.selectedStreet)
        }
      }
    })
  </script>
</body>
</html

编写一个html页面 使用 vue版本是2版本 elementui组件 里面包括一个二级联动 一级下拉框为单选 二级下来框为多选一个三级联动 一级下拉框为单选 二级下拉框多选 三级下拉框多选

编写一个html页面使用 vue版本是2版本 elementui组件里面包括一个二级联动一级下拉框为单选二级下来框为多选一个三级联动一级下拉框为单选二级下拉框多选三级下拉框多选