效果
代码实现
<template> <div class="app"> <el-form ref="form" :model="form"> <el-form-item label="手机品牌"> <el-select v-model="form.phoneBrand" placeholder="请选择" @change="changeSelect"> <el-option v-for="(item,index) in brandOptions" :key="index" :label="item" :value="item" /> </el-select> </el-form-item> <el-form-item label="手机型号"> <el-select v-model="form.phoneType" placeholder="请选择"> <el-option v-for="(item,index) in typeOptions" :key="index" :label="item" :value="item" /> </el-select> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { brandOptions: ['OPPO', '华为', 'VIVO'], brandObj: { 'OPPO': ['OPPO1', 'OPPO2', 'OPPO3'], '华为': ['华为1', '华为2', '华为3'], 'VIVO': ['VIVO1', 'VIVO2', 'VIVO3'] }, typeOptions: [], form: { phoneBrand: '', phoneType: '' } } }, methods: { changeSelect() { // 清空手机型号内容 this.form.phoneType = '' // 遍历手机品牌的下拉选项数组 for (const k in this.brandOptions) { // 手机品牌内容 是否等于 手机品牌的下拉选择数组中的某一项 if (this.form.phoneBrand === this.brandOptions[k]) { this.typeOptions = this.brandObj[this.form.phoneBrand] } } } } } </script> <style> .app{ margin:20px; width: 100%; } </style>