18 动态表单显示

 后台可以控制前端显示那些字段，前端整体代码如下

<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;
    }
}

后期会对组件进行封装，敬请期待