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
                })
            },