【vue组件】使用element-ui 实现三级联动下拉选择
实现的思路是第一个下拉选择在选择了选项后将该选项的信息传递到接口请求下一个选项的内容，依次类推
然后在清除了上一级选择的选项后要将其次级和子孙级的选项都清除（包括选择里的列表内容）
下面看具体代码：
<template>
<div>
<div>
<el-form
:size="'small'"
:inline="true"
:model="ruleForm"
ref="ruleForm"
label-width="120px"
label-position="left"
:rules="addRules"
>
<div class="scan_title">展示:</div>
<!-- 自定义清除方法，注意change方法在clear前执行 -->
<el-row>
<el-form-item label="一级选项：" prop="firstId">
<el-select
v-model="ruleForm.firstId"
placeholder="请选择一级选项"
@change="changeFirst"
@clear="handleClearFirstId"
style="width: 220px"
clearable
>
<el-option
v-for="item in allFirstList"
:key="item.firstId"
:label="item.firstNo"
:value="item.firstId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="次级选项：" prop="secondId">
<el-select
style="width: 220px"
v-model="ruleForm.secondId"
placeholder="请选择次级选项编号"
@change="changeSecond"
@clear="handleClearSecondId"
clearable
>
<el-option
v-for="item in allSecondList"
:key="item.secondId"
:label="item.secondNo"
:value="item.secondId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="三级选项：" prop="thirdId">
<el-select
style="width: 220px"
v-model="ruleForm.thirdId"
placeholder="请选择三级选项编号"
@change="changeThird"
value-key="thirdId"
clearable
>
<el-option
v-for="item in allThirdList"
:key="item.thirdId"
:label="item.thirdNo"
:value="item.thirdId"
>
</el-option>
</el-select>
</el-form-item>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "LinkingSelect",
props: {},
data() {
return {
selectedLabelList: [],
filSelectedLabels: [],
refreshKey: 0,
ruleForm: {},
dynamicTags: [],
tagVisible: false,
allFirstList: [],
allSecondList: [],
allThirdList: [],
addRules: {
firstId: [
{
required: true,
trigger: "change,blur",
message: "请选择一级选项",
},
],
secondId: [
{
required: true,
trigger: "change,blur",
message: "请选择次级选项",
},
],
thirdId: [
{
required: true,
trigger: "change,blur",
message: "请选择三级选项",
},
],
},
};
},
created() {
this.handleGetAllFirst();
},
mounted() {
},
methods: {
// 清除次级选择以及子孙选择的内容
handleClearSecondId() {
this.ruleForm.secondId = "";
this.ruleForm.thirdId = "";
this.allThirdList = [];
},
// 清除一级选择以及子孙选择的内容
handleClearFirstId() {
this.ruleForm.firstId = "";
this.ruleForm.secondId = "";
this.ruleForm.thirdId = "";
this.allThirdList = [];
this.allSecondList = [];
},
// 清除最后一级选择的内容并刷新
changeThird() {
this.$forceUpdate();
},
changeSecond(secondId) {
this.ruleForm.thirdId = "";
// 判断是否为空字符串
if (secondId && secondId !== "") {
// 请求接口
// getThird({
// secondId: secondId,
// fileId: this.ruleForm.fileId,
// }).then((res) => {
// this.allThirdList = res.data;
// });
// 模拟数据
this.allThirdList = [
{
createBy: "admin",
createTime: "2023-03-27 10:24:30",
updateBy: "",
updateTime: null,
remark: null,
thirdId: 3,
thirdNo: "H0",
leftCapacity: 1,
totalCapacity: 5,
secondNo: "X0",
secondId: 11,
firstNo: "G0",
firstId: 11,
manageBy: "admin",
delFlag: "0",
deptId: 100,
deptName: "若依科技",
beginTime: null,
endTime: null,
userId: null,
},
];
}
},
changeFirst(firstId) {
this.ruleForm.secondId = "";
this.ruleForm.thirdId = "";
if (firstId !== "") {
// 请求接口
// getSecond({
// firstId: firstId,
// fileId: this.ruleForm.fileId,
// }).then((res) => {
// this.allSecondList = res.data;
// });
// 模拟数据
this.allSecondList = [
{
createBy: "admin",
createTime: "2023-03-27 10:24:10",
updateBy: "",
updateTime: null,
remark: null,
secondId: 11,
secondNo: "X0",
leftCapacity: 4,
totalCapacity: 5,
firstId: 11,
firstNo: "G0",
manageBy: "admin",
delFlag: "0",
deptId: 100,
deptName: "若依科技",
userId: null,
thirdId: null,
},
];
}
},
handleGetAllFirst() {
// getFirst({
// fileId: this.ruleForm.fileId,
// }).then((res) => {
// this.allFirstList = res.data;
// });
this.allFirstList = [
{
createBy: "admin",
createTime: "2023-03-27 10:23:57",
updateBy: "",
updateTime: null,
remark: null,
firstId: 11,
firstNo: "G0",
leftCapacity: 5,
totalCapacity: 5,
manageBy: "admin",
delFlag: "0",
deptId: 100,
deptName: "若依科技",
beginTime: null,
endTime: null,
userId: null,
fileCate: null,
secondId: null,
thirdId: null,
},
{
createBy: "aduser",
createTime: "2023-03-27 10:15:12",
updateBy: "",
updateTime: null,
remark: null,
firstId: 6,
firstNo: "G1",
leftCapacity: 0,
totalCapacity: 5,
manageBy: "aduser",
delFlag: "0",
deptId: 201,
deptName: "管理部",
beginTime: null,
endTime: null,
userId: null,
fileCate: null,
secondId: null,
thirdId: null,
},
{
createBy: "aduser2",
createTime: "2023-03-27 10:00:14",
updateBy: "aduser2",
updateTime: "2023-03-27 10:14:31",
remark: null,
firstId: 1,
firstNo: "G11",
leftCapacity: 0,
totalCapacity: 5,
manageBy: "aduser2",
delFlag: "0",
deptId: 207,
deptName: "管理一部",
beginTime: null,
endTime: null,
userId: null,
fileCate: null,
secondId: null,
thirdId: null,
},
];
},
},
};
</script>
<style scoped>
</style>
效果图：
