springboot+vue动态字段,动态列表显示

1、后台代码片段:

	@GetMapping("tableList")
	public R tableList(String  tableName)
	{
		//startPage();
		Map params = new HashMap<>();
		params.put("tableName", tableName);
		params.put("fields", "*");
		params.put("page", getRequest().getAttribute("pageNum")==null?1:getRequest().getAttribute("pageNum"));
		params.put("pageSize", 100);
		params.put("total", 0);
		params.put("totalPage", 0);
		List> maps = dbTableService.get(params);
		System.out.println(params);
		JSONObject jb = new JSONObject();
		jb.put("title", "序号");
		jb.put("dataIndex", "id");
		JSONObject jb2 = new JSONObject();
		jb2.put("title", "姓名");
		jb2.put("dataIndex", "name");
		JSONObject jb3 = new JSONObject();
		jb3.put("title", "卡号");
		jb3.put("dataIndex", "idcard");
        
		JSONArray ja = new JSONArray();
		ja.add(jb);
		ja.add(jb2);
		ja.add(jb3);
        return R.data(ja).put("rows", maps).put("total", params.get("totalPage")).put("pageNum", params.get("page"));
	}

2、前端vue代码片段:

  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      mdl: {},
      permissions: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      columns: [],
      range: null,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.queryParam.tableName = 'nifi_user'
        return getDbTableResultList(Object.assign(parameter, this.queryParam))
          .then(res => {
            this.columns = res.data
            return res
        })
      },
      commonStatus: [],
      selectedRowKeys: [],
      selectedRows: [],
      sysDbMap: [],
      codeEnable: checkPermission('tool:gen:code'),
      editEnable: checkPermission('tool:gen:edit'),
      removeEnable: checkPermission('tool:gen:remove')

    }
  },

测试了一下,可以通过动态表,动态字段进行查询

你可能感兴趣的:(web应用)