VUE三级联动的下拉框

本文主要是介绍VUE三级联动的下拉框，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. 首先关于后台的代码,三级联动和二级联动没有区别也是通过字典字段的查询实现联动

//三级联动下拉框
        public List<City> GetCid(int pid)
        {
            return db.City.Where(m => m.ParentId == pid).ToList();
        }

2. 前台的代码还是比较麻烦的,要写三个方法

<tr>
            <td>籍贯</td>
            <td colspan="3">
                省
                <select v-model="formData.ProvinceId" v-on:change="getCity">
                    <option v-for="item in provinceItem" :value="item.CId">{{item.CName}}</option>
                </select>-
                市
                <select v-model="formData.CityId" v-on:change="getCounty">
                    <option v-for="item in cityItem" :value="item.CId">{{item.CName}}</option>
                </select>-
                县
                <select v-model="formData.CountyId">
                    <option v-for="item in countyItem" :value="item.CId">{{item.CName}}</option>
                </select>
            </td>
        </tr>
<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                formData: {
                    ENumber: "",
                    EName: "",
                    ESex: "",
                    DId: "0",
                    EJob: "",
                    EPhone: "",
                    EMail: "",
                    ProvinceId: "0",
                    CityId: "0",
                    CountyId: "0",
                    Birthday: "",
                    Remark: ""
                },
                provinceItem: [],//省
                cityItem: [],//市
                countyItem:[]//县
            }
        },
        methods: {
            //省
            getProvince() {
                axios.get('/CRM/GetCid?pid=0').then(res => {
                    this.provinceItem = res.data;
                    this.provinceItem.unshift({ "CId": "0", "CName": "请选择" })
                })
            },
            //市
            getCity() {
                this.cityItem = [];
                this.countyItem = [];
                axios.get('/CRM/GetCid?pid=' + this.formData.ProvinceId).then(res => {
                    this.cityItem = res.data;
                    this.cityItem.unshift({ "CId": "0", "CName": "请选择" });
                    this.formData.CityId = this.cityItem[0].CId;
                })
            },
            //县
            getCounty() {
                this.countyItem = [];
                axios.get('/CRM/GetCid?pid=' + this.formData.CityId).then(res => {
                    this.countyItem = res.data;
                    this.countyItem.unshift({ "CId": "0", "CName": "请选择" });
                    this.formData.CountyId = this.countyItem[0].CId;
                })
            }
            
        },
        created: function () {
            this.getDept();
            this.getProvince();
        }

    })

</script>

以上就是VUE三级联动

这篇关于VUE三级联动的下拉框的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！