vue选择框二级联动demo

<template>
  <!--一级菜单-->
  <div>
    <el-select v-model="registerStu.collegestu" @change="handleChange">
      <el-option
        v-for="item in subject"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >{{item.name}}</el-option>
      <!---->
    </el-select>
    <!--二级菜单-->
    <el-select v-model="registerStu.subjectstu" ref="scene" @focus="message">
      <el-option
        v-for="item in majorList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >{{item.name}}</el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      registerStu:{
         collegestu: "",
         subjectstu: "",
      },
      subject: [
        {
          id: 1,
          name: "计算机学院",
          obj: [
            {
              id: 11,
              name: "计科1版"
            },
            {
              id: 12,
              name: "2版"
            },
            {
              id: 13,
              name: "3版"
            }
          ]
        },
        {
          id: 2,
          name: "教师教育学院",
          obj: [
            {
              id: 21,
              name: "计科1版"
            },
            {
              id: 22,
              name: "222版"
            },
            {
              id: 23,
              name: "3333版"
            }
          ]
        }
      ]
    };
  },
  computed: {
    majorList() {
      return this.subject.filter(x => x.id === this.registerStu.collegestu)[0]
        ? this.subject.filter(x => x.id === this.registerStu.collegestu)[0].obj
        : this.subject[0].obj;
    }
  },
  methods: {
    handleChange() {
      this.registerStu.subjectstu = "";
    },
    message() {
      if (this.registerStu.collegestu === "") {
        this.$alert("请先选择所在院系", "提示");
        this.$refs.scene.blur();
      }
    }
  }
};
</script>