基于Vue的三级联动下拉框

展示

html部分

1. 使用v-model设置和获取select的值
2. 使用v-for显示option列表
3. 使用:value设置option属性
4. 使用{{}}输出内容

<div id="test">
    单位：
    <select v-model="UnitSelected">
        <option v-for="item in UnitList" :value="item.id">{{item.name}}</option>
    </select>
    部门：
    <select v-model="DepartmentSelected">
        <option v-for="item in DepartmentList" :value="item.id">{{item.name}}</option>
    </select>
    用户：
    <select v-model="UserSelected">
        <option v-for="item in UserList" :value="item.id">{{item.name}}</option>
    </select>
</div>

JavaScript部分

1. 在data中定义vue相关变量
2. 在created中完成初始化变量的操作
3. 在watch中监听Unit和Department下拉框的编号，并更新列表

var UnitRows = [
    {name:"1",id:"1"},
    {name:"2",id:"2"},
];
var DepartmentRows = [
    {name:"11",id:"1",pid:"1"},
    {name:"12",id:"2",pid:"1"},
    {name:"21",id:"3",pid:"2"},
    {name:"22",id:"4",pid:"2"}
];
var UserRows = [
    {name:"111",id:"1",pid:"1"},
    {name:"112",id:"2",pid:"1"},
    {name:"121",id:"3",pid:"2"},
    {name:"122",id:"4",pid:"2"},
    {name:"211",id:"5",pid:"3"},
    {name:"212",id:"6",pid:"3"},
    {name:"221",id:"7",pid:"4"},
    {name:"222",id:"8",pid:"4"}
]
var vm = new Vue({
    el:"#test",
    data:{
        UnitSelected:"",
        UnitList:[],
        DepartmentSelected:"",
        DepartmentList:[],
        UserSelected:"",
        UserList:[]
    },
    created:function () {
        this.UnitList = UnitRows;
        this.UnitSelected = this.UnitList.length>0 ? this.UnitList[0].id : "";

        var val = this.UnitSelected;
        this.DepartmentList = DepartmentRows.filter(function (x) { return x.pid == val });
        this.DepartmentSelected = this.DepartmentList.length>0 ? this.DepartmentList[0].id : "";

        val = this.DepartmentSelected;
        this.UserList = UserRows.filter(function (x){ return x.pid == val});
        this.UserSelected = this.UserList.length>0 ? this.UserList[0].id : "";
    },
    watch:{
        UnitSelected:function (val) {
            this.DepartmentList = DepartmentRows.filter(function (x) { return x.pid == val });
            this.DepartmentSelected = this.DepartmentList.length>0 ? this.DepartmentList[0].id : "";
        },
        DepartmentSelected:function (val) {
            this.UserList = UserRows.filter(function (x){ return x.pid == val});
            this.UserSelected = this.UserList.length>0 ? this.UserList[0].id : "";
        }
    }
});