el-select实现级联选择

项目要求：只有选择学科之后，才显示学科对应的班级列表并且可以选择，当切换学科，班级列表也会跟着变。

el-select代码部分

<el-row>
      <el-col :span="8">
        <span>学科：</span>
        <el-select v-model="form.subjectName" @change="callback">
          <el-option
            v-for="item of list"
            :key="item.id"
            :value="item.name"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <span>班级：</span>
        <el-select v-model="form.className">
          <el-option
            v-for="item of classList"
            :key="item.id"
            :value="item.name"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-col>
</el-row>

根据后台返回的数据，整理成树结构的样式。

    menuList: [
        {
          id: 1001,
          parentId: null,
          name: "城市一中",
          nodeType: null,
          children: [
            {
              id: 22,
              parentId: 1001,
              name: "语文",
              nodeType: 1,
              children: [
                {
                  id: 201,
                  parentId: 22,
                  name: "一年级",
                  nodeType: 2,
                  children: [],
                },
                {
                  id: 202,
                  parentId: 22,
                  name: "三年级",
                  nodeType: 2,
                  children: [],
                },
                {
                  id: 203,
                  parentId: 22,
                  name: "六年级",
                  nodeType: 2,
                  children: [],
                },
              ],
            },
            {
              id: 33,
              parentId: 1001,
              name: "数学",
              nodeType: 1,
              children: [
                {
                  id: 301,
                  parentId: 22,
                  name: "二年级",
                  nodeType: 2,
                  children: [],
                },
                {
                  id: 302,
                  parentId: 22,
                  name: "五年级",
                  nodeType: 2,
                  children: [],
                },
              ],
            },
            {
              id: 44,
              parentId: 1001,
              name: "英语",
              nodeType: 2,
              children: [
                {
                  id: 401,
                  parentId: 22,
                  name: "四年级",
                  nodeType: 2,
                  children: [],
                },
              ],
            },
            {
              id: 55,
              parentId: 1001,
              name: "美术",
              nodeType: 2,
              children: [
                {
                  id: 501,
                  parentId: 22,
                  name: "一年级",
                  nodeType: 2,
                  children: [],
                },
                {
                  id: 502,
                  parentId: 22,
                  name: "二年级",
                  nodeType: 2,
                  children: [],
                },
                {
                  id: 503,
                  parentId: 22,
                  name: "四年级",
                  nodeType: 2,
                  children: [],
                },
                {
                  id: 504,
                  parentId: 22,
                  name: "五年级",
                  nodeType: 2,
                  children: [],
                },
              ],
            },
          ],
        },
      ],

首先获取学科列表

    getSubject() {
      this.list = this.menuList[0].children;
    },

根据所选学科，重置班级选择框获取班级列表

    callback(val) {
      this.form.className = "";
      let options = this.list.filter((item) => item.name == val);
      this.classList = options[0].children;
    },

清空所选学科，班级选择框所选信息也会清空。