Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Dans la pensée originale de js, le choix des listes déroulantes en cascade consiste souvent à lier d'abord le menu de la liste déroulante de premier niveau, puis à onchange sous la liste déroulante, à obtenir l'option actuelle dans l'événement onchange, et puis liez les données de la liste déroulante de deuxième niveau, et ainsi de suite...

Vous devez changer votre façon de penser dans le framework Vue. Définissez d'abord les données de la liste déroulante de premier niveau, puis regardez l'option si elle change, définissez les données de la liste déroulante de deuxième niveau, et ainsi de suite. :

<el-form-item label="省">
      <el-select v-model="where.provinceId" placeholder="请选择省份" clearable >
             <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item.id" />
       </el-select>
</el-form-item>
<el-form-item label="市">
      <el-select v-model="where.cityId" placeholder="请选择市" clearable>
             <el-option v-for="item in cities" :key="item.id" :label="item.name" :value="item.id" />
       </el-select>
</el-form-item>

const provinces = ref([])
const cities = ref([])
 
onMounted(()=>{
    // 通过接口获取省份
    provinces.value = [...data]
})
 
watch: {
    provinceId: {
      deep: true,
      handler() {
        // 根据接口获取市的数据
        cities.value=[...data]
        // 清空城市的选择
        where.cityId=''
      }
    }
},