elementUI 树状图更新

最新推荐文章于 2023-07-25 16:35:05 发布

原创最新推荐文章于 2023-07-25 16:35:05 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍如何使用Element UI中的对话框(el-dialog)和树形控件(el-tree)实现权限分配功能，包括展示数据、选择节点及确认取消操作。通过具体代码示例，展示了如何初始化树形控件并进行事件监听。

解决方式
在确定取消的方法中重新发送请求

HTML

      <el-dialog title="提示" :visible.sync="showAllocate" width="30%">
        <el-tree
          :data="rightList"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
          :default-checked-keys="a"
        ></el-tree>
        <!-- 按钮 -->
        <div class="buttons"></div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="allocateSure">确 定</el-button>
        </span>
      </el-dialog>

    allocate(e) {
      this.showAllocate = true;
      this.getrightsList();
      console.log(e, "分配角色");
      this.a = [];
      e.children.map(item => {
        item.children.map(item1 => {
          item1.children.map(item2 => {
            this.a.push(item2.id);
          });
        });
      });