elementui select多級下拉框

1. 模板

        <el-form-item label="上級分類" prop="itemId">
          <el-cascader
            :options="parentData"
            :show-all-levels="true"
            :props="{ checkStrictly: true, value: 'id' }"
            style="width: 420px"
            @change="selectParentData"
            :value="selItemId"
          ></el-cascader>
        </el-form-item>

2. 表單重置

      this.selItemId = this.parentData[0].id;
      this.form.itemId = this.parentData[0].id;//沒有change的觸發時候賦值

3. 多選框選中

    selectParentData(data) {

      let index = data.length;

      for (const key in data) {

        if (key == index - 1) {

          this.form.categoryId = data[key];

        }

      }

    },

4. 取數據

    getParentData() {
      subjectCheckingCategoryMenuTree().then((response) => {
        response.SubjectCheckingCategoryMenus.unshift({
          id: "0",
          label: "根目錄",
        });
        this.parentData = response.SubjectCheckingCategoryMenus;
      });
    },

 

5. 回顯

this.selParentId = response.data.parentId;

  response.data.parentId = String(response.data.parentId);

this.form = response.data;

 

6. 注意注意注意：一定要用v-model，而不用value綁定數據，不然就會出現默認選項不能再次選擇的問題