jeecg中j-vxe-table和j-popup组件的修改使用

最新推荐文章于 2025-08-31 00:08:01 发布

原创

最新推荐文章于 2025-08-31 00:08:01 发布 · 6.5k 阅读

标签

#前端 #前端框架 #javascript

本文介绍了如何在Jeecg项目中，利用JVXETable组件结合j-popup实现按部门选择用户的功能，包括SQL查询设置、报表参数配置及动态表单制作的详细步骤。

项目中需要在一个可编辑表格中的一列按部门条件选择部门用户，jeecg前端框架带有j-vxe-table组件，这个组件中也有JVXETypes.popup 类型的列，不过这个列不能带参数查询，不能使用，用了JVXETypes.slot类型的列，放入了j-popup组件，做了一些修改，实现了需求。

设置online报表数据

在线开发->online报表配置中，录入一个新的报表
sql如下：

select a.id,username,realname,d.dep_id as departId from sys_user a
right join sys_user_depart d
on d.user_id=a.id
where d.dep_id='${departId}'

点sql解析按钮，获取到列，设置列的字段文本，是否显示等
报表参数中增加 departId 参数
如图：
在这里插入图片描述

确定保存，报表编码为：sel_user_by_depart

制作表单

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="inline">
        <a-form-item label="非必选部门人数">
          <a-input-number v-model="nums"></a-input-number>
        </a-form-item>
      </a-form-model>
      <j-vxe-table
        ref="vTable"
        row-number
        keep-source
        :dataSource="dataSource"
        :columns="columns">
        <template v-slot:need="props">
          {
  
  { props.row.need == 'Y' ? '是' : '否' }}
        </template>
        <template v-slot:user="props">
          <j-popup code="sel_user_by_depart"
                   :target-id="props.row.id"
                   field="realname"
                   orgFields="id,realname,departid"
                   destFields="id,realname,departid"
                   :param="props.row.param"
                   :multi="false"
                   :trigger-change="true"
                   @callback="popupCallback"/>
        </template>
      </j-vxe-table>
    </a-spin>
  </j-modal>
</template>

<script>
import { getAction, postAction } from '../../../../api/manage'
import { JVXETypes } from '../../../../components/jeecg/JVxeTable'

export default {
  name: 'TermForm',
  props: {
    type: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      title: '设置工作组',
      width: 800,
      visible: false,
      disableSubmit: false,
      confirmLoading: false,
      plan: {

最低0.47元/天解锁文章