Vue.js 三级联动

先上代码，后面有说明

• html

<select v-model="selectedProvince" class="itxt" name="loginname" tabindex="1"
        style="width:120px;border: 1px solid #bdbdbd;height:38px;line-height:38px;">
    <option disabled selected="selected" :value="{code:-1}">省/市</option>
    <template v-for="province in provinceList">
        <option :value="{code:province.id,name:province.nameCn}">{{province.nameCn}}
        </option>
    </template>
</select>
                                

<select v-model="selectedCity" class="itxt" name="loginname" tabindex="1"
        style="width:120px;border: 1px solid #bdbdbd;float:right;height:38px;line-height:38px;">
    <option disabled selected="selected" :value="{code:-1}">市/区</option>
    <template v-for="city in cityList">
        <option :value="{code:city.id,name:city.nameCn,level:city.level}">
            {{city.nameCn}}
        </option>
    </template>
</select>


<select v-model="selectedDealer" class="itxt" name="loginname" tabindex="1"
        style="width:100%;float:right;height:38px;line-height:38px;">
    <option disabled selected="selected" :value="{code:-1}">请选择</option>
    <template v-for="dealer in dealerList">
        <option :value="{code:dealer.dealerCode,name:dealer.nameCn,addressCn:dealer.addressCn}">
            {{dealer.nameCn}}
        </option>
    </template>
</select>

• js

var vm = new Vue({
    el: '#orderInfo',
    data: {
        orderInfo: {
            consignee: '',
            idCard: '',
            province: '',
            provinceCode: '',
            city: '',
            cityCode: '',
            dealerCode: '',
            dealerName: ''
        },
        selectedDealer: {code: -1},
        selectedProvince: {code: -1},
        selectedCity: {code: -1},
        provinceList: [],
        cityList: [],
        dealerList: []

    },
    methods: {
        submitOrder: function () {
            var _self = this;
            _self.orderInfo.provinceCode = _self.selectedProvince.code;
            _self.orderInfo.province = _self.selectedProvince.name;
            _self.orderInfo.cityCode = _self.selectedCity.code;
            _self.orderInfo.city = _self.selectedCity.name;
            _self.orderInfo.dealerCode = _self.selectedDealer.code;
            _self.orderInfo.dealerName = _self.selectedDealer.name;
            this.$http.post("/v1/api/order", _self.orderInfo).then(function (res) {
                alert(res.body.message);
                if (res.body.success) {
                    location.href = '/pay/index?orderSn=' + res.body.data.orderSn;
                }
            }, this.httpError);
        }
    },
    watch: {
        selectedProvince: function (newVal, oldVal) {
            var _self = this;
            if (newVal && typeof newVal != "undefined") {
                $.get("/v1/api/dealer/city/" + newVal.code, function (data) {
                    _self.cityList = data;
                    _self.selectedCity = {code: -1};
                });
            }
        },
        selectedCity: function (newVal, oldVal) {
            var _self = this;
            if (newVal && typeof newVal != "undefined" && newVal.code != -1) {
                $.get("/v1/api/dealer/" + newVal.code + "?level=" + newVal.level, function (data) {
                    _self.dealerList = data;
                })
            }
            _self.selectedDealer = {code: -1};
        }
    },

    created: function () {
        var _self = this;
        $.ajax({
            url: '/v1/api/dealer/province',
            type: "GET",
            dataType: 'json',
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (res) {
                _self.provinceList = res;
            }
        });
    }
})

以上是省，市，经销商的三级联动

注意点主要：

• create方法中的ajax调用是同步方法，异步调用页面加载后省的数据可能还没请求回来
• $.get()，$.post()方式调用接口要引用vue-resource.js
• v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
• 如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。<option disabled selected="selected" :value="{code:-1}">省/市</option>
• 表单的value值可以绑定对象 <option :value="{code:dealer.dealerCode,name:dealer.nameCn,addressCn:dealer.addressCn}">

作者：冯延龙
链接：https://www.jianshu.com/p/affc52987622
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。