Κοινή χρήση τεχνολογίας

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

Σύμφωνα με τον αρχικό τρόπο σκέψης js, η επιλογή των κυμαινόμενων αναπτυσσόμενων πλαισίων είναι συχνά να συνδέσετε πρώτα το μενού του αναπτυσσόμενου πλαισίου πρώτου επιπέδου, μετά να αλλάξετε κάτω από το αναπτυσσόμενο πλαίσιο, να αποκτήσετε την τρέχουσα επιλογή στο συμβάν onchange και στη συνέχεια συνδέστε τα δεδομένα του αναπτυσσόμενου πλαισίου δεύτερου επιπέδου και ούτω καθεξής...

Θα πρέπει να αλλάξετε τη σκέψη σας στο πλαίσιο του Vue, να ορίσετε πρώτα τα δεδομένα του αναπτυσσόμενου πλαισίου πρώτου επιπέδου και, στη συνέχεια, να παρακολουθήσετε την επιλογή, εάν αλλάξει, να ορίσετε τα δεδομένα του αναπτυσσόμενου πλαισίου δεύτερου επιπέδου και ούτω καθεξής :

<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=''
      }
    }
},