
<template>
  <div class="content">
    <div>组织列表</div>
    <el-input
      class="searchInput"
      placeholder="输入关键字进行过滤"
      v-model="filterText"
      suffix-icon="el-icon-search"
    >
    </el-input>
    <div class="treeDiv">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        ref="tree"
        highlight-current
        default-expand-all
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
        node-key="id"
        :current-node-key="currentNodeKey"
        :filter-node-method="filterNode"
      ></el-tree>
    </div>
  </div>
</template>


<script>
import { getOrgTreeData } from "@/api/people/people";
 
export default {
  data() {
    return {
      filterText: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentNodeKey: "",
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {},
  mounted() {
    getOrgTreeData().then((res) => {
      this.treeData = res.data;
      this.currentNodeKey = res.data[0].id;
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(res.data[0].id);
      });
      this.$emit("getTreeData", res.data[0]);
    });
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.$emit("getTreeData", data);
    },
  },
};
</script>

2.绑定属性解释

（1） :data="treeData" 绑定树结构对应的数据，需要在data中定义treeData数组。


data() {
    return {
      filterText: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentNodeKey: "",
    };
  },

（2）:props="defaultProps" 配置treeData数据中对应的属性名称，方便前后端统一属性名以及二级属性名

（3） node-key="id" 对于获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置node-key。

（4）ref="tree"

（5）highlight-current 是否高亮当前选中节点，默认值是 false。

（6）default-expand-all 是否默认展开所有节点默认值是 false。

（7）:expand-on-click-node="false" 是否在点击节点的时候展开或者收缩节点，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

（8）@node-click="handleNodeClick" 节点点击时的回调

（9）:current-node-key="currentNodeKey" 当前选中的节点，绑定data中自定义的数据，方便后续操作

（10）:filter-node-method="filterNode" 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏。

在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。

3. 渲染Tree组件数据

（1）对照后端接口

（2）调接口获取组织机构树信息


mounted() {
    getOrgTreeData().then((res) => {
      this.treeData = res.data;
      this.currentNodeKey = res.data[0].id;
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(res.data[0].id);
      });
      this.$emit("getTreeData", res.data[0]);
    });
  },


// 组织机构树
export function getOrgTreeData() {
  return request({
    url: "/api/sys/organization/tree",
    method: "get",
  });
}

（3）组织机构效果图

三、使用Tree组件实现组织机构树查询列表功能

效果图

1. 搭建主页面核心框架


<div class="content-panel">
          <el-col :span="6">
            <Tree @getTreeData="getTreeData"></Tree>
          </el-col>
          <el-col :span="18">
            <div class="options-panel f-r-b-c">
              <div>
                <el-input
                  v-model="params.username"
                  placeholder="请输入用户名"
                  clearable
                  style="margin-right: 30px; width: 150px"
                ></el-input>
                <el-button
                  type="primary"
                  size="mini"
                  style="margin: 34px"
                  @click="searchInfoChange"
                  >搜索</el-button
                >
                <el-button size="mini" @click="reset">重置</el-button>
              </div>
            </div>
            <div class="buttonDiv">
              <el-button type="primary" @click="createDialog">新增</el-button>
            </div>
            <div class="tableSpan">
              <el-table
                ref="singleTable"
                :data="AccountData"
                style="width: 100%"
                stripe
                fit
                highlight-current-row
                @row-click="handleClickRow"
              >
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column
                  prop="orgName" label="公司名称" width="200" align="center"></el-table-column>
                <el-table-column prop="username" label="用户名" width="100" align="center"></el-table-column>
                <el-table-column prop="roleIds" label="权限角色" width="150" align="center" > </el-table-column>
                <el-table-column prop="status" label="状态" width="100" align="center">
                  <template slot-scope="scope">
                    <p v-if="scope.row.status == 1" type="success">启用</p>
                    <p v-if="scope.row.status == 0" type="warning">禁用</p>
                  </template>
                </el-table-column>
                <el-table-column prop="jobDuty" label="备注" width="100" align="center">
 </el-table-column>
                <el-table-column prop="" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="handleManageRow(scope.row.id)"
                      >编辑</el-button
                    >
                    <el-button
                      @click="handleDeleteRow(scope.row.id)"
                      type="text"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                class="pagelist"
                :current-page.sync="params.pageNum"
                :page-size="params.pageSize"
                layout="total, prev, pager, next"
                :total="params.total"
                @current-change="handlePageChange"
              />
            </div>
          </el-col>
        </div>

注意： table绑定的数据是:data="AccountData"

2.显示主页面列表数据

(1)在data中定义查询参数


params: {
  username: "", // 用户名
  orgId: "", // 组织机构id
  status: "", // 状态，0：禁用，1：启用
  pageNum: 1, // 当前第几页
  pageSize: 10, // 每页数量
  total: 0, // 总记录数
},

(2)调接口显示列表数据

查看接口文档可以看出,需要根据Tree中点击的orgaId进行查询


// 获取人员账户列表
    getAccount() {
      let req = { ...this.params };
      delete req.total;
      getAccountList(req).then((res) => {
        this.AccountData = res.data.list;
        this.orgName = res.data.list[0].orgName; // 记录新建时回显的公司全部名称
        this.params.total = res.data.totalCount;
      });
    },


// account.js
// 账户详情
export function getAccountList(data) {
  return request({
    url: "api/sys/user/list",
    method: "post",
    data: data,
  });
}

3.组件传值显示数据

由于切换机构名称的操作在Tree组件中,但是查询方法getAccount()在父组件中,因此在子组件中切换orgId就需要出发父组件中的方法@getTreedata.


<!--父组件中引用子组件,并把方法传入子组件中-->
<Tree @getTreeData="getTreeData"></Tree>


// Tree子组件中
mounted() {
    getOrgTreeData().then((res) => {
      this.treeData = res.data;
      this.currentNodeKey = res.data[0].id;
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(res.data[0].id);
      });
      this.$emit("getTreeData", res.data[0]);
    });
  },
methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.$emit("getTreeData", data);
    },
  },

注意:在mounted中获取组织树对象后需要默认初始化展示第一个元素的列表信息,所以调用了父组件的方法.

在handleNodeClick()中,控制切换点击组织树,获取组织机构值后,调用父组件的方法查询并展示数据


getTreeData(data) {
      this.params.orgId = data.id; // 获取选中的组织树的机构id
      this.treeNodeData = data;
      this.getAccount();
      }
    },

四、实现右键新增删除的组织机构树

参考链接:vue-context-menu鼠标右键事件_poplargg的博客-CSDN博客_vue-context-menu

npm install vue-contextmenu --save

(2)在main.js中引用


import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)


<div class="treeDiv">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        ref="tree"
        highlight-current
        default-expand-all
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
        node-key="id"
        :current-node-key="currentNodeKey"
        :filter-node-method="filterNode"
        @node-contextmenu="showMenu"
      ></el-tree>
      <vue-context-menu
        :contextMenuData="contextMenuData"
        @handleNew="handleNew"
        @handleDelete="handleDelete"
      ></vue-context-menu>
    </div>

在data中绑定添加contentMenuData. menuName-菜单名,axis-位置坐标,menulist-菜单选项(对应的方法)为固定写法.


data() {
    return {
      filterText: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentNodeKey: "",
      currentNodeNode: {},
      // 菜单数据
      contextMenuData: {
        menuName: "demo",
        //菜单显示的位置
        axis: {
          x: null,
          y: null,
        },
        //菜单选项
        menulists: [
          {
            fnHandler: "handleNew", //绑定事件
            btnName: "新增", //菜单名称
          },
          {
            fnHandler: "handleDelete",
            btnName: "删除",
          },
        ],
      },
      dialogFormVisible: false,
      form: {
        type: 1,
        name: "",
        creditCode: "",
        contactName: "",
        contactPhone: "",
      },
      formLabelWidth: "100px",
    };
  },

3.修改组织机构树

(1) el-tree添加鼠标右击事件

其中,@node-contextmenu="showMenu" 当某一节点被鼠标右键点击时会触发该事件


showMenu(event, data) {
      console.log(data);
      this.currentNodeNode = data;
      this.$refs.tree.setCurrentKey(data.id);
      this.currentNodeKey = data.id;
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      // Get the current location
      this.contextMenuData.axis = {
        x,
        y,
      };
    },

其主要目的就是在鼠标右击的位置显示菜单，并获取到点击的组织机构树信息。

（2）编辑右键菜单函数

右键菜单包含两个函数【新建】【删除】分别对应handleNew和handleDelete,这部分的内容在contextMenuData中的menulists菜单选项中定义。


<vue-context-menu
    :contextMenuData="contextMenuData"
    @handleNew="handleNew"
    @handleDelete="handleDelete"
></vue-context-menu>


//菜单选项
 menulists: [
   {
      fnHandler: "handleNew", //绑定事件
      btnName: "新增", //菜单名称
   },
   {
      fnHandler: "handleDelete",
      btnName: "删除",
   },
],

（3）实现菜单按钮功能

新建：显示弹框


// 新建 - 弹框
handleNew() {
      this.dialogFormVisible = true;
},

删除：调用接口删除组织机构树中的节点


handleDelete() {
      this.$confirm("此操作将永久删除该组织, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteOrg(this.currentNodeKey).then((res) => {
            if (res.code === 200 && res.success === true) {
              this.$message.success(res.message);
              this.getTreeData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/119222

【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree

一、页面效果预览

二、Tree组件的设计

1.修改elementUI的tree结构