若依系统侧边栏的树状结构

最新推荐文章于 2024-05-14 15:41:22 发布

yu_zheng5163

最新推荐文章于 2024-05-14 15:41:22 发布

阅读量410

点赞数 8

文章标签： javascript

本文链接：https://blog.csdn.net/m0_56095048/article/details/135276888

版权

在这里插入图片描述

  <select id="selectEventUserCountList" parameterType="EventUserCount" resultMap="EventUserCountResult">
        <!--<include refid="selectEventUserCountVo"/>-->
        select * from tb_event_user_count e  LEFT JOIN sys_dept d ON e.dept_id = d.dept_id
        <where>
                <if test="deptId != null and deptId != 0">
                    AND (d.dept_id = #{deptId} OR d.dept_id IN ( SELECT d.dept_id FROM sys_dept d WHERE find_in_set(#{deptId},
                    ancestors) ))
                </if>
                <if test="userName != null  and userName != ''">
                    and user_name like concat('%', #{userName}, '%')
                </if>
        </where>
        <!-- 数据范围过滤 -->
        ${params.dataScope}
    </select>

在这里插入图片描述

   <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="2" :xs="20">
        </el-col>
 </el-row>

在这里插入图片描述

import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

 components: { Treeselect },

在这里插入图片描述

 watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },

  created() {
    this.getList();
    this.getDeptTree();
  },

在这里插入图片描述

/** 查询部门下拉树结构 */
getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery();
    },