日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

el-cascader 級聯選擇器回顯數據 (帶有子級children)

作者:梁小茹 更新時間: 2021-12-08 編程語言

上代碼拉

這里要說一下加校驗 提交得時候是提交數組,所有prop 綁的也是這個值
在這里插入圖片描述

        <el-form-item
              label="權限范圍:"
              :label-width="formLabelWidth"
              prop="roleMenuList"
            >
              <el-cascader
                v-model="role_id"
                :options="limitData"
                :props="propsEdit"
                collapse-tags
                clearable
                @change="handleEditChange"
              ></el-cascader>
            </el-form-item>
            
data(){
    return {
        propsEdit: {
             //編輯
             multiple: true,
             value: "menuId",
             label: "menuName",
             children: "children",
         },
          role_id: [],
        // 表單驗證
        dataRules: {
            roleName: [{ required: true, trigger: "blur", message: "請輸入" }],
            roleMenuList: [
                  { type: "array", required: true, trigger: "change" },
            ],
        },
         // 編輯
        editRole: {
            enterpriseId: 1,
             roleId: "",
             roleName: "",
             roleMenuList: [],
      },
    }
}
   // 點擊 編輯用戶回顯
    openAddUser(row) {
      console.log("信息", row);
      this.editRole.roleName = row.roleName;
      this.muneIdList = row.muneIdList;
      // 回顯的數據 通過id 去判斷顯示的數據
      !!!!!做了處理  這塊代碼就不需要拉
      // row.muneIdList.forEach((menuId) => {
      //   this.role_id = [menuId];
      // });
      // console.log(this.role_id);
      this.editRole.roleId = row.roleId;
      this.getLimitsInfo(); //獲取權限范圍列表
      this.editVisible = true;
    },
    
     // 選中值發生變化得時候
     handleEditChange(event) {
     // 這里的處理可根據后臺需要什么類型進行轉換即可
      const arrayToString = (event) => {
        let str = "";
        for (let i = 0; i < event.length; i++) {
          if (Array.isArray(event[i])) {
            str += arrayToString(event[i]);
          } else {
            str += event[i];
          }
        }
        return str;
      };
      let roleMenuList = arrayToString(event.join(",")).split(",").map(Number);
      let handlezero = Array.from(new Set(roleMenuList)) || [];//去重
      //因為里面有還有一個0 所以length為 1   在這里進行了處理
      this.editRole.roleMenuList = handlezero.length > 0 && handlezero[0] == 0 ? [] : handlezero; 
    },

   // 結構匹配
    transferItem(list) {
      let ids = [];
      (this.muneIdList || []).forEach((id) => {
        (list || []).forEach((item) => {
          if (item.menuId == id) {
            ids.push([item.parentId, item.menuId]);
          }
        });
      });
      return ids;
    },
    // 獲取權限范圍
    getLimitsInfo() {
      getLimitsInfo()
        .then((res) => {
          console.log("權限范圍", res);
          if (res.code == 200) {
            this.limitData = res.data;
            let roleIdlIST = [];
            let muneIdList = Array.from(new Set(this.muneIdList)); // 去重
            將拿到得數據和原數據進行對比
            (muneIdList || []).forEach((ids) => {
              (this.limitData || []).forEach((item) => {
                if (item.menuId == ids && item.parentId == 0) {
                  // !!!  這里將子級進行處理
                  roleIdlIST.push(this.transferItem(item.children));
                }
              });
            });
            進行合并
            roleIdlIST.forEach((item) => {
              this.role_id = this.role_id.concat(item);
            });
            this.handleEditChange(this.role_id);
          }
          // 關閉加載狀態
          this.tableLoading = false;
        })
        .catch((err) => {
          console.log(err);
          // 關閉加載狀態
          this.tableLoading = false;
        });
    },

跟著這樣一步步就可以 實現!加油 !

原文鏈接:https://blog.csdn.net/weixin_46653486/article/details/122112665

欄目分類
最近更新