網站首頁 編程語言 正文
上代碼拉
這里要說一下加校驗 提交得時候是提交數組,所有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
相關推薦
- 2022-05-10 電商后臺開發之商品規格組合算法
- 2022-10-27 詳解Python中enumerate函數的使用_python
- 2022-04-22 R語言繪制Radar?chart雷達圖_R語言
- 2022-08-29 Python通用驗證碼識別OCR庫ddddocr的安裝使用教程_python
- 2023-10-14 uni-app adb安卓wifi無線調試
- 2022-11-15 C語言自研定時器計劃任務語法詳解_C 語言
- 2022-03-31 C語言類的雙向鏈表詳解_C 語言
- 2023-04-06 C/C++程序鏈接與反匯編工具objdump的使用介紹_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支