vue中el-table多級(jí)嵌套列表(菜單使用el-switch代替)
需求:根據(jù)el-table實(shí)現(xiàn)多級(jí)菜單復(fù)選,并且只要是菜單就不再有復(fù)選框,也沒(méi)有全選按鈕,一級(jí)菜單使用el-switch代替原有的列復(fù)選框,子級(jí)如果全部選中,那么父級(jí)的el-switch也會(huì)被選中,如下圖,注意:這樣寫(xiě)是沒(méi)有列頭的,列頭的全選按鈕一直獲取不到它的checked的值,試了很多種還是不行,全選按鈕只能全選反選實(shí)現(xiàn)不了,放棄了。
1.后端數(shù)據(jù)
- 一定要后端給每個(gè)級(jí)別的菜單還有增刪改查功能項(xiàng)都添加個(gè)checked:false
- 后端一定要用type或者是什么表示是菜單還是功能項(xiàng)
- 后端數(shù)據(jù)如下,多級(jí)的列表,type為0表菜單,為1表功能項(xiàng)
"data": [ { "menu_id": 1, "menu_name": "儀表盤(pán)", "type": 0, "checked": false, "children": [ { "menu_id": 17, "menu_name": "查看", "type": 1, "checked": false } ] }, { "menu_id": 1, "menu_name": "用戶管理", "type": 0, "checked": false, "children": [ { "menu_id": 17, "menu_name": "查看", "type": 1, "checked": false, "children": [ { "menu_id": 31, "menu_name": "設(shè)備連接拓?fù)鋱D隱藏或顯示", "type": 1, "checked": false }, } ] },
2.el-table表格實(shí)現(xiàn)
- :data就是后端的數(shù)據(jù)
- row-key:行數(shù)據(jù)的key值,要是唯一值,不然報(bào)錯(cuò)
- :show-header=false不展示表頭
- :tree-props="{ children: 'children', hasChildren: 'hasChildren' }",渲染嵌套數(shù)據(jù)的默認(rèn)配置,通俗點(diǎn)就是,判斷有沒(méi)有children有就下一級(jí)自動(dòng)渲染
- 主要是看第一個(gè)el-table-column的 type="selection"屬性,這個(gè)屬性就是添加復(fù)選框了,之后使用插槽的方式只要是type為0功能項(xiàng)才會(huì)添加el-checkbox復(fù)選框按鈕,type為1的才是el-switch開(kāi)關(guān)控制
<el-table :data="tableData" row-key="menu_id" style="width: 100%" :show-header="false" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" > <el-table-column type="selection" :selectable="selectable" width="50" > <template slot-scope="{ row }"> <span v-if="row.type === 0"></span> <el-checkbox v-model="row.checked" v-else @change="handleCheck(row.menu_id, row.checked, row)" ></el-checkbox> </template> </el-table-column> <el-table-column prop="menu_name" label="菜單" align="left"> </el-table-column> <el-table-column label="操作" align="center"> <template slot-scope="scope" v-if="scope.row.type == 0"> <el-switch v-model="scope.row.checked" active-color="#13ce66" inactive-text="全選" @change="swictchange($event, scope.row)" > </el-switch> </template> </el-table-column> </el-table>
3.多級(jí)嵌套表單-單選-反選el-switch
如果子級(jí)的功能項(xiàng)都選中了那么直接反選子級(jí)的上一級(jí)的el-switch的開(kāi)關(guān),這邊建議直接復(fù)制
這邊傳入的tabledata就是所有的數(shù)據(jù),使用遞歸的方式實(shí)現(xiàn)的反選switch
// 點(diǎn)擊單行獲取到數(shù)據(jù),實(shí)現(xiàn)反選 handleCheck() { this.setHandleCheck(this.tableData); }, setHandleCheck(menuList) { // checked變量初始化為true let checked = true; // 遍歷菜單列表的每一個(gè)菜單, for (let i = 0; i < menuList.length; i++) { // []中的每一個(gè)對(duì)象存儲(chǔ)在menu const menu = menuList[i]; // 如果菜單中有子菜單,那么就遞歸重新調(diào)用菜單來(lái)更新子菜單的checked屬性 if (menu.children && menu.children.length > 0) { menu.checked = this.setHandleCheck(menu.children); } // 判斷初始值和menu.checked的值是否為ture checked = checked && menu.checked; } return checked; },
4.el-switch控制全選子級(jí),子級(jí)單選沒(méi)選完之后再點(diǎn)擊switch會(huì)全選
// 開(kāi)關(guān)狀態(tài) swictchange(flag, row) { this.setLastRight(row, this.menulistReq, flag); console.log(this.menulistReq, "遞歸得到的值"); this.setHandleCheck(this.tableData); }, // 遞歸全選 setLastRight(obj, arr, flag) { if (!obj.children) { return; } // 當(dāng)前對(duì)象要是沒(méi)有children,就遍歷children obj.children.forEach((item) => { item.checked = flag; // 傳遞倆個(gè)實(shí)參,item在一二級(jí)都是有chilren,所以會(huì)一直調(diào)用到最后一級(jí),最后一級(jí)是沒(méi)呀chiren this.setLastRight(item, arr, flag); }); }
5.提交權(quán)限
這樣就實(shí)現(xiàn)多級(jí)全選反選了,最后用el-button按鈕提交權(quán)限,接口什么的每個(gè)人封裝的不一樣哈,寫(xiě)法可能有點(diǎn)出入,我在提交的時(shí)候是提交menu_id,只需要在最后遍歷一遍表格數(shù)據(jù),根據(jù)checked為true的吧menu_id添加到數(shù)組就行了,之后再傳給后端
// 分配角色權(quán)限 async allotPermission() { this.recursionChecedTrue(this.tableData); const menu = [...new Set(this.menulistReq)]; const res = await SetRoleManage({ menu_ids: menu, id: this.copyrole.id_1, }); if (res.code == 200) { this.$message.success("角色分配成功"); } }, // 遞歸獲取所有checked為ture的值 recursionChecedTrue(tableData) { tableData.forEach((item) => { if (item.checked) { this.menulistReq.push(item.menu_id); } if (item.children) { this.recursionChecedTrue(item.children); } }); },
到此這篇關(guān)于el-table多級(jí)嵌套列表(菜單使用el-switch代替)的文章就介紹到這了,更多相關(guān)el-table多級(jí)嵌套列表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在vue項(xiàng)目中優(yōu)雅的使用SVG的方法實(shí)例詳解
本文旨在介紹如何在項(xiàng)目中配置和方便的使用svg圖標(biāo)。本文以vue項(xiàng)目為例給大家介紹在vue項(xiàng)目中優(yōu)雅的使用SVG的方法,需要的朋友參考下吧2018-12-12Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法
這篇文章主要介紹了Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法,文中補(bǔ)充介紹了VUE-Element組件 CheckBox多選框使用方法,需要的朋友可以參考下2024-01-01vue中點(diǎn)擊下載圖片的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中點(diǎn)擊下載圖片的實(shí)現(xiàn)方法,在Vue的模板中,我們可以將下載屬性綁定至或元素上,用來(lái)實(shí)現(xiàn)點(diǎn)擊下載,需要的朋友可以參考下2023-08-08vue3在構(gòu)建時(shí)使用魔法糖語(yǔ)法時(shí)defineProps和defineEmits的注意事項(xiàng)小結(jié)
在 Vue 3.2+ 版本中,可以使用 <script setup> 替代傳統(tǒng)的 script標(biāo)簽來(lái)編寫(xiě)組件,它提供了更簡(jiǎn)潔的語(yǔ)法來(lái)編寫(xiě) Composition API 代碼,這篇文章主要介紹了vue3在構(gòu)建時(shí)使用魔法糖語(yǔ)法時(shí)defineProps和defineEmits的注意事項(xiàng)小結(jié),需要的朋友可以參考下2024-04-04Vue?router應(yīng)用問(wèn)題實(shí)戰(zhàn)記錄
vue-router是vue.js官方的路由插件,他和vue.js是深度集成的適合構(gòu)建單頁(yè)面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于Vue?router應(yīng)用問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04vue 使用async寫(xiě)數(shù)字動(dòng)態(tài)加載效果案例
這篇文章主要介紹了vue 使用async寫(xiě)數(shù)字動(dòng)態(tài)加載效果案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07詳解Vue template 如何支持多個(gè)根結(jié)點(diǎn)
這篇文章主要介紹了詳解Vue template 如何支持多個(gè)根結(jié)點(diǎn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02