element-ui drawer 抽屉组件渲染 tree 树形组件

效果图如下：

子组件：

<template>
  <el-drawer
    :visible.sync="dialogVisible"
    :direction="direction"
    :show-close="false"
    @close="close"
    @open="open"
  >
    <div slot="title" class="demo-drawer__header">
      <span>{{ title }}</span>
    </div>
    <div class="demo-drawer__content">
      <el-form ref="form" :model="data" :rules="rules" label-width="80px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input
            size="small"
            v-model.trim="data.roleName"
            placeholder="请输入"
            maxlength="20"
            show-word-limit
            clearable
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input
            type="textarea"
            v-model="data.remark"
            placeholder="请输入角色描述..."
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="页面授权" required>
          <el-tree
            class="page_box"
            :data="treeData"
            show-checkbox
            node-key="id"
            :props="props"
            ref="tree"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="数据权限">
          <el-checkbox v-model="data.seeAllOkr" :disabled="disabled"
            >查看全部目标（包含私密目标）</el-checkbox
          >
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button size="mini" @click="close">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm"
          >确 定</el-button
        >
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { addRole, updateRole } from "@/api/roles";
export default {
  props: [
    "title",
    "visible",
    "treeData",
    "data",
    "props",
    "checkedKeys",
    "currentNodeKey",
    "disabled",
  ],
  data() {
    return {
      dialogVisible: this.visible,
      checkedKeysArr: this.checkedKeys,
      direction: "rtl",
      rules: {
        roleName: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        menuIds: [
          {
            required: true,
            message: "请选择",
            trigger: ["change", "focus"],
          },
        ],
      },
    };
  },
  created() {},
  mounted() {},
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
    },
    checkedKeys(newVal) {
      this.checkedKeysArr = newVal;
    },
  },
  methods: {
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.tree.getCheckedKeys();
      return checkedKeys;
    },
    close() {
      this.$refs["form"].resetFields();
      this.$refs.tree.setCheckedKeys(this.checkedKeysArr);
      this.$emit("close");
    },
    open() {
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(this.checkedKeysArr);
      });
    },
    show() {
      this.dialogVisible = true;
    },
    submitForm() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          this.data.menuIds = this.getMenuAllCheckedKeys();
          if (this.data.menuIds.length == 0) {
            this.$message.error("请勾选页面授权！");
            return;
          }

          if (this.title === "添加角色") {
            const { msg, code, data } = await addRole(this.data);
            if (code === 200) {
              this.successFun(msg);
            } else {
              this.$message.error(msg);
            }
          } else {
            const { msg, code, data } = await updateRole(this.data);
            if (code === 200) {
              this.successFun(msg);
            } else {
              this.$message.error(msg);
            }
          }
        }
      });
    },
    successFun(msg) {
      this.$message.success(msg);
      this.$refs["form"].resetFields();
      this.$emit("success");
      this.$emit("close");
    },
  },
};
</script>

<style scoped lang="scss">
.demo-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 40px;

  .page_box {
    margin-top: 7px;
  }
}

.demo-drawer__content form {
  flex: 1;
}

.demo-drawer__footer {
  display: flex;
  padding: 20px;
  justify-content: flex-end;
}
.demo-drawer__header {
  background: #4ab26c;
  align-items: center;
  color: #fff;
  display: flex;
  padding: 15px 10px;
}

/deep/.el-drawer__header {
  padding: 0px;
}
/deep/.el-drawer:focus {
  outline: 0;
}
</style>

父组件：

<template>
  <div>
    <!-- 顶部 -->
    <commonHeader class="commonHeader"></commonHeader>
    <!-- 添加角色 -->
    <create-role
      ref="roleMenuTree"
      :title="title"
      :visible="drawer"
      :treeData="menuData"
      :data="form"
      :props="defaultProps"
      :checkedKeys="checkedKeys"
      :disabled="disabled"
      @close="close"
      @success="getList"
    ></create-role>
    <div class="content-wrap paddingTop48">
      <div class="main-box">
        <div class="top-box">
          <div class="left-panel">
            <el-row :gutter="24">
              <el-col :xs="24" :sm="24" :md="4" :lg="5" :xl="5">
                <span class="top-label">角色名称：</span>
                <el-input
                  size="small"
                  v-model.trim="queryParams.roleName"
                  placeholder="请输入"
                  clearable
                  class="search-input"
                  @clear="clearName"
                ></el-input>
              </el-col>
              <el-col :xs="24" :sm="24" :md="4" :lg="5" :xl="5">
                <span class="top-label">角色简介：</span>
                <el-input
                  size="small"
                  v-model.trim="queryParams.remark"
                  placeholder="请输入"
                  clearable
                  class="search-input"
                  @clear="clearName"
                ></el-input>
              </el-col>
              <el-col :xs="24" :sm="24" :md="4" :lg="5" :xl="5">
                <el-button type="success" size="mini" @click="handleQuery"
                  >搜&nbsp;索</el-button
                >
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :md="4"
                :lg="9"
                :xl="9"
                class="text-right"
              >
                <el-button size="mini" @click="handleAdd">添加角色</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-table
          v-loading="listLoading"
          :data="tableData"
          fit
          style="width: 100%"
        >
          <el-table-column align="center" prop="roleName" label="角色名称">
          </el-table-column>
          <el-table-column align="center" prop="remark" label="角色简介">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="text" size="small"
                >编辑</el-button
              >
              <el-button
                @click="handleDelete(scope.row)"
                type="text"
                size="small"
                >删除</el-button
              >
              <el-button
                @click="handleDetail(scope.row)"
                type="text"
                size="small"
                >权限范围</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :background="background"
          :current-page="queryParams.pageNum"
          :layout="layout"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import commonHeader from "@/components/header.vue";
import createRole from "./components/createRole.vue";
import {
  getList,
  getRole,
  delRole,
  menuTreeSelect,
  roleMenuTreeselect,
} from "@/api/roles";
export default {
  components: {
    commonHeader,
    createRole,
  },
  data() {
    return {
      title: "",
      disabled: false,
      drawer: false,
      dialogFormVisible: false,
      listLoading: false,
      background: true,
      layout: "total, sizes, prev, pager, next, jumper",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: "",
        remark: "",
      },
      form: {
        roleName: "",
        remark: "",
        seeAllOkr: false,
        menuIds: [],
      },
      menuData: [],
      checkedKeys: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    // 查询菜单树结构
    async getMenuTreeSelect() {
      const { msg, code, data } = await menuTreeSelect();
      if (code === 200) {
        this.menuData = data;
      } else {
        this.$message.error(msg);
      }
    },
    // 根据角色ID查询菜单树结构
    async getRoleMenuTreeselect(roleId) {
      const { msg, code, menus, checkedKeys } = await roleMenuTreeselect(
        roleId
      );
      if (code === 200) {
        this.menuData = menus;
        this.checkedKeys = checkedKeys;
      } else {
        this.$message.error(msg);
      }
    },
    //获取列表数据
    async getList() {
      this.listLoading = true;
      const { msg, code, rows, total } = await getList(this.queryParams);
      if (code === 200) {
        this.tableData = rows;
        this.total = total;
      } else {
        this.$message.error(msg);
      }
      this.listLoading = false;
    },
    //页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    //每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // input清空事件
    clearName() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleClick(row) {
      this.dialogFormVisible = true;
    },
    async showEdit(row, detail) {
      if (!row) {
        this.title = "添加角色";
        this.disabled = false;
        this.getMenuTreeSelect();
      } else {
        if (!detail) {
          this.title = "编辑角色";
          this.disabled = false;
        } else {
          this.title = "权限范围";
          this.disabled = true;
        }
        await this.getRoleMenuTreeselect(row.roleId);
        const { msg, code, data, roleIds } = await getRole(row.roleId);
        if (code === 200) {
          this.form = data;
        } else {
          this.$message.error(msg);
        }
      }
      this.drawer = true;
    },
    handleAdd() {
      this.form = {};
      this.showEdit();
    },
    handleEdit(row) {
      this.showEdit(row);
    },
    handleDelete(row) {
      this.$confirm("您确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { msg, code, data } = await delRole(row.roleId);
          if (code === 200) {
            this.$message.success(msg);
            this.getList();
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {});
    },
    handleDetail(row) {
      this.showEdit(row, "detail");
    },
    close() {
      this.drawer = false;
      this.checkedKeys = [];
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../../assets/css/roles/roles.scss";
</style>

原文链接：https://blog.csdn.net/zyg1515330502/article/details/112245595