Element的select的实现省市区级联

最新推荐文章于 2024-06-20 10:00:58 发布

原创最新推荐文章于 2024-06-20 10:00:58 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Element #vue #dom

Element 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用Vue结合Element UI组件库实现省市区三级联动选择功能，解决级联选择中数据同步与展示的问题。文章详细展示了HTML结构、data声明及change方法的实现，帮助开发者快速掌握并应用到实际项目中。

因为有之前的经验教训，可能是layui和vue的冲突，一个简单的级联饶了我一天的时间

layui的select实现省市区级联

估计以后打死我都不想用layui了

所以新做的增删改查页面统一用Element了，不知道比layui简单多少

1、页面html

            <el-form-item label=项目所在地>
                <el-select  style="width: 100px;" v-model="form2.province" clearable @change="getCity" value-key="dcode"  prop="province">
                        <el-option
                        v-for="item in provinceData"
                    :key="item.index"
                    :label="item.distname"
                    :value="item">
                        </el-option>
                </el-select>-
                <el-select  style="width: 100px;" v-model="form2.city" clearable  @change="getTown" value-key="dcode" prop="city">
                        <el-option
                        v-for="item in cityData"
                    :key="item.index"
                    :label="item.distname"
                    :value="item">
                        </el-option>
                </el-select>-
                <el-select  style="width: 100px;" v-model="town" clearable value-key="dcode"  prop="town">
                        <el-option
                        v-for="item in townData"
                    :key="item.index"
                    :label="item.distname"
                    :value="item">
                        </el-option>
                </el-select>
            </el-form-item>

2、data声明

3、change方法

            getProvince(){
                this.axios.get("/qsmonitor/common/dist?pcode=")
                    .then(res => {
                        this.provinceData = res.data.data;
                    });
            },
            getCity(item){

                let dcode=item.dcode;
                this.form2.city='';
                this.town='';
                this.cityData=[];
                this.townData=[];
                this.axios.get("/qsmonitor/common/dist?pcode="+dcode)
                    .then(res => {
                        this.cityData = res.data.data;
                        this.$forceUpdate();
                    });
            },
            getTown(item){
                let dcode=item.dcode;
                this.town='';
                this.townData=[];
                this.axios.get("/qsmonitor/common/dist?pcode="+dcode)
                    .then(res => {
                        this.townData = res.data.data;
                        this.$forceUpdate();
                    });
            },

注意：上边给option的value赋的是一个对象值，需要设定value-key的值

因为页面中的省市区县是作为查询条件取得的distname的值，但是级联时候用到的是dcode，所以相比直接赋value值，这里边查询和级联都多了一层操作