前端根据下拉框选项联动出现另一个下拉框的值

前端根据下拉框选项联动出现另一个下拉框的值

<el-form-item label="食物">
              <el-select v-model="form.food" placeholder="请选择" @change="choose($event)">
                <el-option label="主食" value="1"></el-option>
                <el-option label="水果" value="2"></el-option>
              </el-select>
            </el-form-item>
</el-form-item>

data:

 foodOrFruitsList: [],
foodMap: [
          {name: '米饭', value: 1}, {name: '面条', value: 2}, {name: '饺子', value: 3}, {name: '管馒头', value: 4},
          {name: '包子', value: 5}, {name: '大饼', value: 6}  ],
 FruitsMap: [
          {name: '苹果', value: 1}, {name: '香蕉', value: 2}, {name: '葡萄', value: 3},
            {name: '哈密瓜', value: 4}
        ]

方法：

choose(val) {
        if (val === '1') {
          this.foodMap.map((item, index) => {
            this.quitList.push({
              name: item.name,
              value: item.value
            })
          })
        }else{
          this.quitList =[]
          this.FruitsMap.map((item,index)=>{
            this.quitList.push({
              name: item.name,
              value: item.value
            })
          })
        }
      }

这样就可以实现当选择水果时出现的是水果的选项，选择食物时出现食物的选项。这只是前端实现。
描述有误的地方欢迎大家指正，大家有问题可加qq 876942434。一起进步~