el-table动态生成表头和内容

HTML

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="css/element-ui-index.css">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element-ui-index.js"></script>

</head>
<body>
<div id="user">
<el-card class="box-card">
    <el-row>
        <el-col :span="12" :offset="6">
            请输入用户名：<el-input placeholder="根据用户名模糊查找" v-model="userName" clearable style="width: 200px"></el-input>
            <el-button type="primary" @click="query">查询</el-button>
        </el-col>
    </el-row>
</el-card>

    <el-table :data="users.tableData" v-if="users.tableData!=''" style="width: 100%">
        <el-table-column  v-for="(item,index) in users.tableHead" :prop="item.column_value" :label="item.column_name" :key="index" width="180">
        </el-table-column>
    </el-table>

</div>
</body>
<script src="js/queryUser.js"></script>
</html>

 

　　

 

后端代码

controller

 

package com.java.test1.controller;

import com.java.test1.mapper.UserDoMapper;
import com.java.test1.service.UserService;
import com.java.test1.table.UserTable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
import java.util.Map;


@RestController
public class UserController {

    @Autowired
    private UserService userService;


   @PostMapping("/queryAll")
   public UserTable queryAllUser(@RequestBody Map<String,Object> map){
       String userName = (String)map.get("userName");

       UserTable usersMap = userService.queryAllUsers(userName);
       return usersMap;
   }

}

 

 

 

service

 

package com.java.test1.service;

import com.java.test1.table.UserTable;


public interface UserService {
    UserTable queryAllUsers(String userName);
}

 

　　

 

serviceImpl

 

package com.java.test1.service.impl;

import com.java.test1.mapper.UserDoMapper;
import com.java.test1.service.UserService;
import com.java.test1.table.Table;
import com.java.test1.table.UserTable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;


@Service("UserService")
public class UserServiceImpl implements UserService {

    @Autowired
    UserDoMapper userDoMapper;

    @Override
    public UserTable queryAllUsers(String userName) {
       List<Map<String, Object>> userMap = userDoMapper.queryAllUser(userName);
        List<String> userColumns = userDoMapper.queryUserColumn();
        UserTable userTable = new UserTable();
        List<Table> tableList = new ArrayList<>();

        Table table = null;
        for (String userColumn : userColumns) {
            table = new Table();
            table.setColumn_name(userColumn);
            table.setColumn_value(userColumn);
            tableList.add(table);
        }

        userTable.setTableHead(tableList);
        userTable.setTableData(userMap);
        return userTable;
    }
}

 

　　

 

mapper

package com.java.test1.mapper;

import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Component;
import java.util.List;
import java.util.Map;

@Component
public interface UserDoMapper {

    List<Map<String,Object>> queryAllUser(@Param("userName")String Username);

    //查询所有列名
    List<String> queryUserColumn();

}

　　

 

posted @ 2021-05-22 15:02  iTao0128  阅读(2801)  评论(0)    收藏  举报