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

项目中需要在一个可编辑表格中的一列按部门条件选择部门用户,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 参数
如图:
jeecg中j-vxe-table和j-popup组件的修改使用_第1张图片
jeecg中j-vxe-table和j-popup组件的修改使用_第2张图片
确定保存,报表编码为:sel_user_by_depart

制作表单






注意j-popup的设置:
:target-id=“props.row.id” 这个是修改组件后增加的属性,用于将记录id传入popup组件中,在回调时再传回来,方便定位是哪一条记录。

在listDeprt方法中的 设置行参数: r.param = { departId: r.departId }
经尝试,不用这样的方式设置,会报错。

修改后的j-popup





增加了 targetId属性,在 callback事件中加入这个参数

对j-popup-onl-report的修改

 watch: {
      code() {
        this.loadColumnsInfo()
      },
      param:{
        deep:true,
        handler(){
          if(this.visible){
            this.dynamicParamHandler()
            this.loadData();
          }
        },
      }
    },

只在监听param中加了个判断,如果没有显示就不加载数据,否则在第一次正常使用完关闭表单窗口后,再次打开,不点popup就会去加载数据,此时参数不全,没有报表id,会一直弹404错误。

最终效果
jeecg中j-vxe-table和j-popup组件的修改使用_第3张图片

你可能感兴趣的:(vue-js,前端,前端框架,javascript)