动态表格需要配置的查询方法

    public void selectEx(){
        String sql = "select MODIFY_DATE as modifyDate, MODIFY_ID as modifyId, CODE as code, MOULD_CODE as mouldCode,MOULD_NAME as mouldName,0 as state from uwm_mold_in \n" +
                "union all\n" +
                "select MODIFY_DATE as modifyDate, MODIFY_ID as modifyId, CODE as code, MOULD_CODE as mouldCode,MOULD_NAME as mouldName,1 as state from uwm_mold_out_bill\n";
        /*动态表格*/
        GridDataMode data = new GridDataMode();
        /*list转化map*/
        /*.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP) 将list索引 转化为键值对的形式*/
        List<Map<String , Object>> list = this.getSelectService().getDao().getSession().createSQLQuery(sql).setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();
        /*分页逻辑*/
        data.setRows(list);                         //数据源
        data.setPage("20");                         //页数
        data.setRecords("10");                      //每页内条数
        String total = String.valueOf(list.size()); //总数
        data.setTotal(total);                       //总数
        this.returnData.toGridData(data);
    }
}

动态表格前端 vue 页面

<template>
 <div  class="uexMoldLogSelect">
 <eh-layout>
 <div  slot="center">
 <eh-tabs :tabs.sync="tabs"  ref="tabs"  v-model="userActivePan">
 <template  slot="uexMoldLogSelect-select">
 <eh-dyna-big-data-grid
 id="uexMoldLogSelect"
 ref="uexMoldLogSelect"
              :options="{ isAdd: false, isEdit: false, isDel: false }"
              :extraParamFields="extraParamFields"
              @selection-change="handleSelectionChange"
 >
 <template  v-slot:render-modifyDate="{ row }">
                {{  transtime(row) }}
 </template>
 </eh-dyna-big-data-grid>
 </template>
 </eh-tabs>
 </div>
 </eh-layout>
 </div>
</template>
<script>
import  qs  from  "qs";
import { from } from  "rxjs";
export  default {
 name:  "uexMoldLogSelect",
 data() {
 return {

 tabs: [{ name:  "uexMoldLogSelect-select", title:  "模具日志查询" }],
    };
  },
 methods: {
 transtime(row) {
 let  date = new  Date(row.modifyDate);
 console.log(row);
 let  y = date.getFullYear();
 let  m = date.getMonth() + 1;
 m = m  <  10 ? "0" + m : m;
 let  d = date.getDate();
 d = d  <  10 ? "0" + d : d;
 let  h = date.getHours();
 let  ms = date.getMinutes();
 let  s = date.getSeconds();
 if (ms == 0) {
 ms = "00";
      }
 if (s == 0) {
 s = "00";
      }
 return  y + "-" + m + "-" + d + " " + h + ":" + ms + ":" + s;
    },
  },
};
</script>
<style>
.el-collapse.collapse-form  .el-collapse-item__wrap {
 min-height: 1vh;
}
</style>

解析

前端代码

   GridDataMode data = new GridDataMode();
   this.returnData.toGridData(data);

将动态表格所需要的数据源返回

union all  //union all将两张表合并查询，并且不会进行去重和排序操作

1、union：对两个结果集进行并集操作, 不包括重复行, 相当于 distinct, 同时进行默认规则的排序;
2、union all: 对两个结果集进行并集操作, 包括重复行, 即所有的结果全部显示, 不管是不是重复;

前端代码

//插槽
 <template  v-slot:render-modifyDate="{ row }">
                {{  transtime(row) }}
 </template>


//格式化时间方法如下
 transtime(row) {

 let  date = new  Date(row.modifyDate);
 console.log(row);
 let  y = date.getFullYear();
 let  m = date.getMonth() + 1;
 m = m  <  10 ? "0" + m : m;
 let  d = date.getDate();
 d = d  <  10 ? "0" + d : d;
 let  h = date.getHours();
 let  ms = date.getMinutes();
 let  s = date.getSeconds();
 if (ms == 0) {
 ms = "00";
      }
 if (s == 0) {
 s = "00";
      }
 return  y + "-" + m + "-" + d + " " + h + ":" + ms + ":" + s;
    },
  },

插槽，自带遍历，render-modifyDate=“{row}” 读取此 key 对应的 value 命名为 row
{{transtime(row) }} 调用 transtime() 方法
这里 transtime() 仅为格式化时间