El front-end de elementui el-table selecciona dinámicamente el nombre de la tabla para mostrar los datos de la tabla
elementui muestra la base de datos de consultas todos los datos de la tabla
Escenas:
El front-end pasa el nombre de la tabla y las condiciones de consulta al back-end. El backend se empalma en sql para consulta. Luego regrese al extremo frontal para la visualización.
por ejemplo: Tres parámetros front-end, tableName="t_test", columnName="userName", columnValue="Zhang San"
Debe empalmarse en un campo específico seleccionado de t_test donde nombre de usuario = 'Zhang San'
Código de fondo:
Ejemplo de datos devueltos al front-end:
[{"NAME_name":"Zhang San","AGE_age":"18"},{"NAME_name":"Li Si","AGE_age":"19"}]
@GetMapping("/info")
public R info(@RequestParam("tableName") String tableName,
@RequestParam(value = "columnName",required = false) String columnName,
@RequestParam(value = "columnValue",required = false) String columnValue){
//1、先根据tableName查询出该表的字段和字段注释
/**
* TableInfo :字段（columnName ，columnComment）
* sql:
* select column_name,column_comment from information_schema.columns where table_name='表名' and table_schema='数据库名'
*/
List<TableInfo> list = service.getColumnInfo(tableName);
// 2、拼接查询的sql
String sqlColumn = getSqlColumn(list);
String sql = "select "+sqlColumn+" from "+tableName;
if(StringUtils.isNotBlank(columnName) && StringUtils.isNotBlank(columnValue) ){
sql= sql + " where " +columnName+"="+columnValue;
}
// 执行sql 查询
/**
* xml
* <select id="runSql" parameterType="java.lang.String" resultType="java.util.Map">
* ${sqlStr,jdbcType=VARCHAR}
* </select>
*
* dao
* List <Map> runSql(String sqlStr)
*
*/
List<Map> mapList = service.runSql(sql);
return R.ok(mapList) ;
}
private String getSqlColumn(List<TableInfo> list){
StringBuilder sqlColumn = new StringBuilder();
for(TableInfo tableInfo : list){
String desc = tableInfo.getColumnComment();
//避免有括号内的注释 去掉括号内容
if(desc.indexOf("（")!=-1){
desc = desc.substring(0,desc.indexOf("（"));
}
//别名拼接 eg:NAME as NAME_姓名
sqlColumn.append(tableInfo.getColumnName()+" as "+tableInfo.getColumnName()+"_"+desc+",");
}
// 去掉最后一个逗号
return sqlColumn.toString().substring(0,sqlColumn.toString().length()-1);
}
Código de front-end:
El siguiente es el código del subcomponente de la ventana emergente. Seleccione el nombre de la tabla y la condición (nombre del campo y valor del campo) a través de la página de inicio, haga clic en Consulta para abrir la ventana y mostrar la página después de la consulta. el-table-column ciclo dinámico mostrar datos de tabla
Nota: Al cerrar la ventana emergente o inicializar la ventana emergente, la asignación de campo en los datos debe borrarse para evitar el almacenamiento en caché.
<el-table :data="dataList">
<div v-for="(item,index) in cols" :key="index">
<el-table-column :prop="item.prop" :label="item.label" header-align="center">
<!-- 日期字段格式化 使用过滤器方法中的 formatDate -->
<template slot-scope="scope">
<span v-if="item.label.indexOf('日期')!=-1">{
{scope.row[item.prop] | formatDate}}</span>
<span v-else >{
{scope.row[item.prop]}}</span >
</template>
</el-table-column>
</div>
</el-table>
//data 定义
dataList:[],
cols:[],
tableMap:{},
data:{}//查询的参数 对象 有：tableName columnName columnValue
//方法
async queryTableInfo(){
var param = this.data;
// 后端接口调用
const{ code ,message,data} = await getTableInfo()
if(code=='1000'){
for(let i=0;i<data.length;i++){
let obj = data[i];
var newObj = new Object();
//循环对象
for (let key in obj){
var descKey = key.substring(key.lastIndexOf('_')+1);//这个是中文:姓名
var newKey = key.substring(0,key.lastIndexOf('_'));//key的英文:NAME
this.tableMap(newKey] = descKey ;//{'NAME':'姓名','AGE':'年龄'}
var val = obj [key];
newObj[newKey] = val;//新的对象变为：{'NAME':'张三','AGE':'18'}
}
this.dataList.push(newObj);
}
// cols:[{"label":"姓名","prop":"NAME"},{"label":"年龄","prop":"AGE"}]
for (let key in this.tableMap){
var colObj = {label:this.tableMap[key],prop:key};
this.cols.push(colObj)
}
}
}