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;}},},