vue下拉el-select二级联动

 <el-selectv-model="departmentid"placeholder="请选择部门"@change="changeset"><el-optionv-for="item in departmentlist":key="item.value":label="item.name":value="item.id"></el-option></el-select><el-select v-model="personid" placeholder="请选择人员" :disabled="disabled"><el-optionv-for="item in personlist":key="item.value":label="item.name":value="item.id"></el-option></el-select>

data() {return {//部门departmentlist: [],departmentid: null,//人员personlist: [],personid: null,//禁用disabled: true,};},

mounted() {this.getdepartmentlist();},methods: {getdepartmentlist() {//模拟部门数据let data = [{id: 1,name: "研发部",},{id: 2,name: "项目部",},{id: 3,name: "市场部",},{id: 4,name: "行政部",},];//赋给部门下拉框this.departmentlist = data;},changeset() {//模拟人员数据let data = [{id: 1,             //人员idname: "张三",departmentid: 1,   //部门id},{id: 2,name: "李四",departmentid: 2,},{id: 3,name: "王五",departmentid: 1,},{id: 4,name: "赵六",departmentid: 3,},{id: 5,name: "小红",departmentid: 4,},{id: 6,name: "小明",departmentid: 4,},{id: 7,name: "小李",departmentid: 4,},{id: 8,name: "小张",departmentid: 4,},];//如果部门id不为空if (!!this.departmentid) {//切换的时候人员清空，防止bugthis.personlist = [];//禁用取消this.disabled = false;//遍历人员里面的数据data.forEach((e) => {console.log(e);//如果data里面部门id等于this.departmentidif (e.departmentid == this.departmentid) {//将符合的数据push进人员数组this.personlist.push(e);}});//选中部门，人员默认选中第一个if (this.personlist.length > 0) {this.personid = this.personlist[0].id;}} else {//选中的部门为空，则清空人员列表this.personlist = [];this.disabled = true;}},},

vue下拉el-select二级联动相关推荐

vue实现下拉二级联动_select下拉菜单实现二级联动效果
需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分首先是建立两个表的实体需要注意的就是写注解了 ...
php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
首先我们需要先建立好数据库,将一些数据插入进去需要两张表: province:省份表 city: 城市表如图: 然后再在java中建立相关的实体类与之对应再然后,我们就能开始做jdbc的操作了 ...
二级联动（两个下拉框的二级联动，和单选按钮与下拉框的二级联动）
1,两个下拉框的二级联动代码: <!DOCTYPE html><html lang="en"><head><meta charset=& ...
HTML下拉框、二级联动 select多级联动
html + ajax +php 二级联动下拉框 <!DOCTYPE html> <html> <head> </head> <style> ...
select下拉菜单实现二级联动
需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的(当然,这个也是有解决方案的.可可以百度一下动态sql,使用 ...
vue+element下拉框实现二级联动
参考文章:https://blog.csdn.net/qq_42341025/article/details/86601093 <el-form-item label-width="8 ...
vue实现下拉表单二级联动
 <select name="province" id="province" class="classify& ...
下拉框的二级联动和回显
二级联动和回显效果如下: 二级联动我们首先要查询出年级表的内容,在年级表的控制层中; Controller /*** 查询nj表的内容 @RequestMapping("/spr/nj& ...
layui框架----下拉框的二级联动
一.layui.use 这里layui的官方文档:https://www.layui.com/doc/ layui这个框架采用的是经典模块化 layui的内置模块不是默认就加载好的,必须要执行启动模块 ...

vue下拉el-select二级联动

vue下拉el-select二级联动

vue下拉el-select二级联动相关推荐

最新文章

热门文章