Laravel Vue 下拉框联动小技巧

jcc123 的个人博客 / 1 / 0 / 创建于 5年前 / 更新于 5年前

最近在做一个后台管理相关的东西，有一个关于下拉框联动的小技巧可以分享给大家，写好后不用更改前端代码，只需更改后端相应的配置，即可增加相对应的联动。

比如有两个下拉框一个省和一个市的下拉框，这里只是拿省市打个比方，两个元素是相互依赖的关系，方便理解，并不是要做省市区的三级联动，当然也可以做。

1 用户模型定义相关参数


class User
{
    const PROVINCE_BEIJING = 'geijing';
    const PROVINCE_SHANGHAI = 'shanghai';
    public static $provinceMaps = [
        self::PROVINCE_BEIJING=>'北京',
        self::PROVINCE_SHANGHAI=>'上海'
    ];

    const CITY_DONGCHENG='dongcheng';
    const CITY_ZHAOYANG='zhaoyang';
    const CITY_PUDONG='pudong';
    const CITY_BAOSHAN='baoshan';

    public static $cityMaps=[
        self::CITY_DONGCHENG=>'东城区',
        self::CITY_ZHAOYANG=>'朝阳区',
        self::CITY_PUDONG=>'浦东新区',
        self::CITY_BAOSHAN=>'宝山区',
    ];

    //省市联动配置
    public static $cityByProvinceMaps=[
        self::PROVINCE_BEIJING=>[
            self::CITY_DONGCHENG=>'东城区',
            self::CITY_ZHAOYANG=>'朝阳区',
        ],
        self::PROVINCE_SHANGHAI=>[
            self::CITY_PUDONG=>'浦东新区',
            self::CITY_BAOSHAN=>'宝山区'
        ]
    ];

}

2 获取定义的参数

获取方法

function getMModelMaps($classes)
{
    $map = [];
    foreach ($classes as $class){
        $ref = new \ReflectionClass($class);
        $className = $ref->getShortName();
        $constants = $ref->getConstants();
        $staticProperties = $ref->getStaticProperties();
        $onlyMapsProperties = [];
        foreach ($staticProperties as $key=>$v){
            if(strpos($key,'Maps') !== false){
                $onlyMapsProperties[$key] = $v;
            }
        }
        $map[$className]= array_merge($constants,$onlyMapsProperties);
    }

    return $map;
}

$maps= getMModelMaps([User::class]);

运行转化为json的结果

{
    "User": {
        "PROVINCE_BEIJING": "beijing",
        "PROVINCE_SHANGHAI": "shanghai",
        "CITY_DONGCHENG": "dongcheng",
        "CITY_ZHAOYANG": "zhaoyang",
        "CITY_PUDONG": "pudong",
        "CITY_BAOSHAN": "baoshan",
        "provinceMaps": {
            "beijing": "北京",
            "shanghai": "上海"
        },
        "cityMaps": {
            "dongcheng": "东城区",
            "zhaoyang": "朝阳区",
            "pudong": "浦东新区",
            "baoshan": "宝山区"
        },
        "cityByProvinceMaps": {
            "beijing": {
                "dongcheng": "东城区",
                "zhaoyang": "朝阳区"
            },
            "shanghai": {
                "pudong": "浦东新区",
                "baoshan": "宝山区"
            }
        }
    }
}

3 传到前端展示

使用的是laravel 的 blade 模版


<div id="app">
    <select name=""  v-model="province">
        <option value="">请选择省</option>
        <option v-for="(name,key) in provinceMaps" :value="key">@{{name}}</option>
    </select>
    <select  v-model="city">
        <option value="">请选择市</option>
        <option v-for="(name,key) in cityMaps" :value="key">@{{name}}</option>

    </select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            province:'',
            city:'',
            maps:@json($maps),
            provinceMaps:@json($maps).User.provinceMaps,
            cityMaps:@json($maps).User.cityMaps,
        },
        watch:{
            province(val){
                this.city=''
                this.cityMaps=this.maps.User.cityByProvinceMaps[val]
            },
            city(val){
                if(val){
                    if(!this.province){
                        this.city=''
                        alert('请先选择省')
                    }
                }
            }
        }
    })
</script>