element ui 实现省市区三级联动 及for循环获取数组里对象的属性

1，html中 省，市级需加上change事件

<el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="150px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="医院名称" prop="name">
                        <el-input v-model="form.name" clearable placeholder="请输入医院名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="省:" prop="province">
                        <el-select v-model="form.province" clearable @change="handleChange" placeholder="请选择省" style="width:100%">
                            <el-option v-for="item in province_options" :label="item.name" :value="item.code" :key="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="市:" prop="city">
                        <el-select v-model="form.city" clearable @change="handleChangeCity" placeholder="请选择市" style="width:100%">
                            <el-option v-for="item in city_options" :label="item.name" :value="item.code" :key="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="县区:" prop="district">
                        <el-select v-model="form.district" clearable placeholder="请选择县区" style="width:100%">
                            <el-option v-for="item in district_options" :label="item.name" :value="item.code" :key="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item>
                    <el-button type="primary" @click="handleSubmit('form')">肯定</el-button>
                </el-form-item>
            </el-row>
        </el-form>

2 js代码中，首先经过请求接口获取省的province_options,而后在省的change事件里经过for循环（根据i是否与须要的code相等，获取对应的id）获取省的id（由于后端须要经过省的id返回前端市的city_options，一样须要经过市的id返回前端县的district_options）

// 省
            loadProvinceOptions() {
                this.$http.post('/province/select').then(res => {
                    this.province_options = res.data
                })
            },
            //获取市
            handleChange() {
                for (var i = 0; i < this.province_options.length; i++ ) {
                    if (this.form.province == this.province_options[i].code) {
                        var ids = this.province_options[i].id
                    }
                }
                let data = {
                    id: ids
                }
                this.$http.post('/city/select', data).then(res => {
                    this.city_options = res.data
                })
            },
            //获取县
            handleChangeCity() {
                for (var i = 0; i < this.city_options.length; i++) {
                    if (this.form.city == this.city_options[i].code) {
                        var idd = this.city_options[i].id
                    }
                }
                let data = {
                    id: idd
                }
                this.$http.post('/city/select', data).then(res => {
                    this.district_options = res.data
                })
            },