JeecgBoot 实现Table列的动态加载

需要在vue文件中引入 render //这个是显示图片的，如果是文字不需要

import { render } from "/@/utils/common/renderUtils";

注册table 时

//注册table时添加 getRawDataSource, setColumns

const [registerTable, { reload, setProps, setLoading, updateTableDataRecord,getRawDataSource, setColumns }] = tableContext;

在页面初始化的项目中添加afterFetch。  column是后台返回的动态列集合

afterFetch: (record) => {

const dictTitle = ""+getRawDataSource().column+"";

console.log("dictTitle:"+dictTitle)

var arrDict = dictTitle.split(",");

console.log("arrDict:"+arrDict)

const dynamicColumn = []; //动态列集合

arrDict.forEach(function(value, index) { //拼接动态列

console.log(value);

dynamicColumn.push({

title: value,

dataIndex: value,

width: 120,

customRender: ({ text }) => {//显示图片

if(!text){

return text;

}

return render.renderImage({text});

},

})

});

// 按逗号分割

setColumns([...columns, ...dynamicColumn]);

console.log('23' + getRawDataSource().column);

},

在页面初始化的项目中添加fetchSetting  因为返回的数据结构改变了，所以需要从返回的数据中取出列表数据

fetchSetting: {

listField: 'list.records',

totalField: 'list.total',

},

 

下面是我反回的数据结构

 

 后台的逻辑就是去查询，我这里动态列配置的字典类型，每次都去查询该字典的值，从而实现动态显示。后台返回的是JSONObject,  column是动态表头数据

list是返回的列表数据，并且列表中的动态列值也是在后台直接动态拼接进去的。