后台可以控制前端显示那些字段,前端整体代码如下
<template> <div class="app-container"> <el-table :key="key" :data="tableData" border fit highlight-current-row style=" 100%"> <el-table-column v-for="item in formThead" :key="item" :label="item"> <template slot-scope="scope">{{ scope.row[item] }}</template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [], key: 1, // table key formThead: [] // 默认表头 Default header }; }, created() { this.getList(); }, methods: { getList() { this.postRequest("/list").then(response => { this.tableData = response.data.list; //表数据 this.formThead = response.data.showList; //表头,控制是否显示对应的列 }); } } }; </script>
后台代码如下
@RestController public class UserController { @RequestMapping("list") public HashMap<String, Object> list(){ ArrayList<User> list = new ArrayList<>(); User u1 =null; for (int i = 0; i <5 ; i++) { u1= new User(); u1.setId(i); u1.setPassword("password"+i); u1.setUsername("admin"+i); u1.setAge(i+"岁"); list.add(u1); } //控制那些字段显示 ArrayList<String> showList = new ArrayList<>(); showList.add("username"); showList.add("password"); showList.add("id"); showList.add("sex"); HashMap<String, Object> map = new HashMap<>(); map.put("showList",showList); map.put("list",list); return map; } }
后期会对组件进行封装,敬请期待