vue下拉el-select三级联动(公司-部门-人员)
vue下拉el-select三级联动举个例子:公司-部门-人员vue页面中:<el-select v-model="companyid" placeholder="请选择公司" @change="changeset"><el-optionv-for="item in companylist":key="item.value":label="item.name":value="it
·
举个例子:公司-部门-人员
vue页面中:
<el-select v-model="companyid" placeholder="请选择公司" @change="changeset">
<el-option v-for="item in companylist" :key="item.value"
:label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select v-model="departmentid" placeholder="请选择部门" :disabled="disabled" @change="changesetper">
<el-option v-for="item in departmentlist" :key="item.value"
:label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select v-model="personid" placeholder="请选择人员" :disabled="disabled1">
<el-option v-for="item in personlist" :key="item.value"
:label="item.name" :value="item.id">
</el-option>
</el-select>
data() {
return {
companyid: null, //公司id
companylist: [], //公司list
departmentid: null, //部门id
departmentlist: [], //部门lsit
disabled: true, //部门禁用
personid: null, //人员id
personlist: [], //人员list
disabled1: true, //人员禁用
};
},
mounted() {
this.getcompanylist(); //获取公司数据
},
methods: {
//模拟公司数据
getcompanylist() {
let data = [
{ id: 1, name: "江西" },
{ id: 2, name: "湖南" },
];
this.companylist = data;
},
changeset() {
//当切换选择公司时需要清空部门、人员
this.departmentlist = [];
this.personid = null;
this.personlist = [];
// 模拟部门数据
let data = [
{
id: 1, //部门Id
name: "江西研发部1",
companyid: 1, //公司id
},
{ id: 2, name: "江西市场部1", companyid: 1 },
{ id: 3, name: "湖南研发部2", companyid: 2 },
{ id: 4, name: "湖南市场部2", companyid: 2 },
];
if (!!this.companyid) {
//当公司ID不为空
this.departmentid = [];
this.disabled = false;
//遍历部门下拉框数据
data.forEach((e) => {
if (e.companyid == this.companyid) {
this.departmentlist.push(e);
}
});
//设置默认选中第一个部门
if (this.departmentlist.length > 0) {
this.personlist = [];
this.departmentid = this.departmentlist[0].id;
//获取人员下拉框数据
let data = [
{ id: 1, name: "江西研发部小张1", departmentid: 1 }, //id:人员id departmentid:部门id
{ id: 2, name: "江西研发部小李1", departmentid: 1 },
{ id: 3, name: "江西市场部小王2", departmentid: 2 },
{ id: 4, name: "江西市场部小蒋2", departmentid: 2 },
{ id: 5, name: "湖南研发部小陆3", departmentid: 3 },
{ id: 6, name: "湖南研发部小夏3", departmentid: 3 },
{ id: 7, name: "小王4", departmentid: 4 },
{ id: 8, name: "小蒋4", departmentid: 4 },
];
//遍历data里面的数据
data.forEach((e) => {
if (e.departmentid == this.departmentid) {
//符合条件的push进人员
this.personlist.push(e);
}
});
this.disabled1 = false;
}
} else {
//选中的部门为空,则清空人员列表 部门列表
this.departmentlist = [];
this.disabled = true;
this.disabled1 = true;
this.personlist = [];
}
},
//切换部门
changesetper() {
this.personlist = [];
this.personid = null;
if (!!this.departmentid) {
this.disabled1 = false;
//部门下拉框选中获取人员数据
let data = [
{ id: 1, name: "江西研发部小张1", departmentid: 1 }, //id:人员id departmentid:部门id
{ id: 2, name: "江西研发部小李1", departmentid: 1 },
{ id: 3, name: "江西市场部小王2", departmentid: 2 },
{ id: 4, name: "江西市场部小蒋2", departmentid: 2 },
{ id: 5, name: "湖南研发部小陆3", departmentid: 3 },
{ id: 6, name: "湖南研发部小夏3", departmentid: 3 },
{ id: 7, name: "小王4", departmentid: 4 },
{ id: 8, name: "小蒋4", departmentid: 4 },
];
data.forEach((e) => {
if (e.departmentid == this.departmentid) {
this.personlist.push(e);
}
});
//设置人员默认选中
if (this.personlist.length > 0) {
this.personid = this.personlist[0].id;
}
} else {
//部门下拉框为空 ,清空数据
this.departmentlist = [];
this.disabled1 = true;
}
},
},
更多推荐
已为社区贡献3条内容
所有评论(0)