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

"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": "设备连接拓扑图隐藏或显示",
							"type": 1,
							"checked": false
						},
				}
			]
		},

       <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>

 // 点击单行获取到数据,实现反选
    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];
        // 如果菜单中有子菜单，那么就递归重新调用菜单来更新子菜单的checked属性
        if (menu.children && menu.children.length > 0) {
          menu.checked = this.setHandleCheck(menu.children);
        }
        // 判断初始值和menu.checked的值是否为ture
        checked = checked && menu.checked;
      }
      return checked;
    },

    // 开关状态
    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;
      }
      // 当前对象要是没有children,就遍历children
      obj.children.forEach((item) => {
        item.checked = flag;
        // 传递俩个实参，item在一二级都是有chilren，所以会一直调用到最后一级，最后一级是没呀chiren
        this.setLastRight(item, arr, flag);
      });
    }

    // 分配角色权限
    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);
        }
      });
    },