应用 vuetifyjs UI框架
<template>
<v-app>
<CommonAppHeader />
<v-container>
<v-row>
<v-col>
<v-select
v-model="selectedFirstLevel"
:items="firstLevelOptions"
label="一级选项"
@change="onFirstLevelChange"
></v-select>
</v-col>
<v-col>
<v-select
v-model="selectedSecondLevel"
:items="selectedFirstLevel ? firstLevelOptiont : []"
label="二级选项"
@change="onSecondLevelChange"
></v-select>
</v-col>
<v-col>
<v-select
v-model="selectedThirdLevel"
:items="selectedSecondLevel ? firstLevelOptionf : []"
label="三级选项"
></v-select>
</v-col>
</v-row>
</v-container>
<CommonAppFooter />
</v-app>
</template>
<script>
export default {
data() {
return {
firstLevelOptions: ["一级分类", "111", "222", "333"],
firstLevelOptiont: ["二级分类", "aaa", "bbb", "ccc"],
firstLevelOptionf: ["三级分类", "!!!", "###", "@@@"],
selectedFirstLevel: null,
selectedSecondLevel: null,
selectedThirdLevel: null,
}
},
methods: {
onFirstLevelChange() {
this.selectedSecondLevel = null;
this.selectedThirdLevel = null;
},
onSecondLevelChange() {
this.selectedThirdLevel = null;
}
}
}
</script>