快捷導(dǎo)航

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

更新時間：2023年06月29日 10:08:26 作者：請叫我歐皇i

本文主要介紹了el-table多級嵌套列表(菜單使用el-switch代替)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

需求：根據(jù)el-table實現(xiàn)多級菜單復(fù)選，并且只要是菜單就不再有復(fù)選框，也沒有全選按鈕，一級菜單使用el-switch代替原有的列復(fù)選框，子級如果全部選中，那么父級的el-switch也會被選中，如下圖，注意：這樣寫是沒有列頭的，列頭的全選按鈕一直獲取不到它的checked的值，試了很多種還是不行，全選按鈕只能全選反選實現(xiàn)不了，放棄了。

1.后端數(shù)據(jù)

一定要后端給每個級別的菜單還有增刪改查功能項都添加個checked:false
后端一定要用type或者是什么表示是菜單還是功能項
后端數(shù)據(jù)如下，多級的列表，type為0表菜單，為1表功能項

"data": [
		{
			"menu_id": 1,
			"menu_name": "儀表盤",
			"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表格實現(xiàn)

:data就是后端的數(shù)據(jù)
row-key：行數(shù)據(jù)的key值，要是唯一值，不然報錯
:show-header=false不展示表頭
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }",渲染嵌套數(shù)據(jù)的默認(rèn)配置，通俗點就是，判斷有沒有children有就下一級自動渲染
主要是看第一個el-table-column的 type="selection"屬性，這個屬性就是添加復(fù)選框了，之后使用插槽的方式只要是type為0功能項才會添加el-checkbox復(fù)選框按鈕，type為1的才是el-switch開關(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.多級嵌套表單-單選-反選el-switch

如果子級的功能項都選中了那么直接反選子級的上一級的el-switch的開關(guān)，這邊建議直接復(fù)制

這邊傳入的tabledata就是所有的數(shù)據(jù)，使用遞歸的方式實現(xiàn)的反選switch

 // 點擊單行獲取到數(shù)據(jù),實現(xiàn)反選
    handleCheck() {
      this.setHandleCheck(this.tableData);
    },
    setHandleCheck(menuList) {
      // checked變量初始化為true
      let checked = true;
      // 遍歷菜單列表的每一個菜單，
      for (let i = 0; i < menuList.length; i++) {
        // []中的每一個對象存儲在menu
        const menu = menuList[i];
        // 如果菜單中有子菜單，那么就遞歸重新調(diào)用菜單來更新子菜單的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控制全選子級，子級單選沒選完之后再點擊switch會全選

    // 開關(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)前對象要是沒有children,就遍歷children
      obj.children.forEach((item) => {
        item.checked = flag;
        // 傳遞倆個實參，item在一二級都是有chilren，所以會一直調(diào)用到最后一級，最后一級是沒呀chiren
        this.setLastRight(item, arr, flag);
      });
    }

5.提交權(quán)限

這樣就實現(xiàn)多級全選反選了，最后用el-button按鈕提交權(quán)限，接口什么的每個人封裝的不一樣哈，寫法可能有點出入，我在提交的時候是提交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多級嵌套列表(菜單使用el-switch代替)的文章就介紹到這了,更多相關(guān)el-table多級嵌套列表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: