VUE2.0 elemenui-ui 2.0.X 封装省市区三级

qq4535292 2018-02-13 原文

VUE2.0 elemenui-ui 2.0.X 封装省市区三级

1. 效果图

2. 版本依赖 vue 2.X ， elementui 2.0.11 使用element ui <el-form>标签

3. 源码 components/CityList/index

<template>
  <el-form ref="form" :model="form" label-width="100px">
    <el-form-item  label="所在地区：">
      <el-cascader v-model="form.selectedOptions" :options="CityInfo" @change="handleChange"
                   :change-on-select="true" :clearable="true"
                   :filterable="true"></el-cascader>
      <!--<span>所选地区：{{ prov }} {{city}} {{area}}</span>-->
    </el-form-item>
  </el-form>
</template>
<script>
  const CityInfo = require('static/city-data.js')
  export default {
    data() {
      return {
        CityInfo: CityInfo['default'],
        form: {
          city: '',
          erae: '',
          minerae: '',
          selectedOptions: []
        }
      }
    },
    methods: {
      handleChange(value) {
        this.form.city = this.form.selectedOptions[0]
        this.form.erae = this.form.selectedOptions[1]
        this.form.minerae = this.form.selectedOptions[2]
        if (this.area) {
          this.$emit('sendCityData', { prov: this.prov, city: this.city, area: this.area })
        }
      }
    },
    computed: {
      prov: function() {
        const Prov = this.form.city
        for (var y in CityInfo['default']) {
          if (CityInfo['default'][y].value === Prov) {
            return CityInfo['default'][y].label
          }
        }
      },
      city: function() {
        const City = this.form.erae
        for (var y in CityInfo['default']) {
          for (var z in CityInfo['default'][y].children) {
            if (CityInfo['default'][y].children[z].value === City && City !== undefined) {
              return CityInfo['default'][y].children[z].label
            }
          }
        }
      },
      area: function() {
        const Area = this.form.minerae
        for (var y in CityInfo['default']) {
          for (var z in CityInfo['default'][y].children) {
            for (var i in CityInfo['default'][y].children[z].children) {
              if (CityInfo['default'][y].children[z].children[i].value === Area && Area !== undefined) {
                return CityInfo['default'][y].children[z].children[i].label
              }
            }
          }
        }
      }
    }
  }
</script>

4. 引入调用

<template>
        <div>
            <h2>当前从组件传递过来的省市数据：</h2>
            <p>{{CityList}}</p>
            <city-list @sendCityData="getCity"></city-list>
        </div>
    </template>
    <script>
        import CityList from '@/components/CityList/index.vue'
        export default {
            components: { CityList },
            data() {
                return {
                    CityList: ''
                }
            },
            methods: {
                getCity(cityList) {
                    this.CityList = cityList
                }
            }
        }
</script>