90°

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

 

本文由【东方巨人】发布于开源中国,原文链接:https://my.oschina.net/u/3949469/blog/3072141

全部评论: 0

    我有话说: