欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中el-table多級(jí)嵌套列表(菜單使用el-switch代替)

 更新時(shí)間:2023年06月29日 10:08:26   作者:請(qǐng)叫我歐皇i  
本文主要介紹了el-table多級(jí)嵌套列表(菜單使用el-switch代替),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

需求:根據(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í)例詳解

    在vue項(xiàng)目中優(yōu)雅的使用SVG的方法實(shí)例詳解

    本文旨在介紹如何在項(xiàng)目中配置和方便的使用svg圖標(biāo)。本文以vue項(xiàng)目為例給大家介紹在vue項(xiàng)目中優(yōu)雅的使用SVG的方法,需要的朋友參考下吧
    2018-12-12
  • Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法

    Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法

    這篇文章主要介紹了Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法,文中補(bǔ)充介紹了VUE-Element組件 CheckBox多選框使用方法,需要的朋友可以參考下
    2024-01-01
  • Vue項(xiàng)目中如何配置src文件下的@別名

    Vue項(xiàng)目中如何配置src文件下的@別名

    這篇文章主要介紹了Vue項(xiàng)目中如何配置src文件下的@別名問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue中點(diǎn)擊下載圖片的實(shí)現(xiàn)方法

    vue中點(diǎn)擊下載圖片的實(shí)現(xiàn)方法

    這篇文章主要給大家介紹了關(guān)于vue中點(diǎn)擊下載圖片的實(shí)現(xiàn)方法,在Vue的模板中,我們可以將下載屬性綁定至或元素上,用來(lái)實(shí)現(xiàn)點(diǎn)擊下載,需要的朋友可以參考下
    2023-08-08
  • vue3在構(gòu)建時(shí)使用魔法糖語(yǔ)法時(shí)defineProps和defineEmits的注意事項(xiàng)小結(jié)

    vue3在構(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-04
  • Vue?router應(yīng)用問(wèn)題實(shí)戰(zhàn)記錄

    Vue?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-04
  • vue 使用async寫(xiě)數(shù)字動(dòng)態(tài)加載效果案例

    vue 使用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)

    這篇文章主要介紹了詳解Vue template 如何支持多個(gè)根結(jié)點(diǎn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • Vue?全部生命周期組件梳理整理

    Vue?全部生命周期組件梳理整理

    這篇文章主要介紹了Vue?全部生命周期組件梳理整理,在創(chuàng)建組件之前使用;在實(shí)例初始化之后,進(jìn)行數(shù)據(jù)偵聽(tīng)和事件,偵聽(tīng)器的配置之前同步調(diào)用
    2022-06-06
  • 在vue或H5中如何使用復(fù)制粘貼功能

    在vue或H5中如何使用復(fù)制粘貼功能

    這篇文章主要介紹了在vue或H5中如何使用復(fù)制粘貼功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評(píng)論