기술나눔

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

원래 js 생각에 따르면 계단식 드롭다운 상자를 선택하는 방법은 먼저 첫 번째 수준 드롭다운 상자의 메뉴를 바인딩한 다음 드롭다운 상자 아래의 onchange, 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=''
      }
    }
},