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

最新推荐文章于 2026-04-22 10:43:07 发布

原创最新推荐文章于 2026-04-22 10:43:07 发布 · 3.1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

web应用专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用SpringBoot后端配合Vue前端实现动态字段的查询和动态列表显示。通过后台代码片段和前端Vue代码示例，展示了如何处理动态数据结构并进行有效查询。

1、后台代码片段：

	@GetMapping("tableList")
	public R tableList(String  tableName)
	{
		//startPage();
		Map<String, Object> 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<Map<String,Object>> 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')

    }
  },

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