elementui el-table フロントエンドは、テーブルデータを表示するテーブル名を動的に選択します。
elementui 表示クエリデータベースすべてのテーブルデータ
シーン:
フロントエンドはテーブル名とクエリ条件をバックエンドに渡します。バックエンドはクエリ用に SQL に接続されます。次に、フロントエンドに戻って表示します。
例: 3 つのフロントエンド パラメーター、tableName="t_test"、columnName="userName"、columnValue="Zhang San"
userName = 'Zhang San' の t_test から選択した特定のフィールドに結合する必要があります
バックエンドコード:
フロントエンドに返されるデータの例:
[{"NAME_name":"チャン・サン","AGE_age":"18"},{"NAME_name":"リー・シー","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);
}
フロントエンドコード:
以下はポップアップ ウィンドウ サブコンポーネントのコードです。ホームページからテーブル名と条件 (フィールド名とフィールド値) を選択し、[クエリ] をクリックしてウィンドウをポップアップし、クエリ後のページを表示します。el-table-column 動的サイクル表示テーブル データ
注: ポップアップ ウィンドウを閉じるとき、またはポップアップ ウィンドウを初期化するときは、キャッシュを避けるためにデータ内のフィールド割り当てをクリアする必要があります。
<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)
}
}
}