实现的思路是第一个下拉选择在选择了选项后将该选项的信息传递到接口请求下一个选项的内容，依次类推
然后在清除了上一级选择的选项后要将其次级和子孙级的选项都清除（包括选择里的列表内容）
下面看具体代码：
<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>
效果图：
