java对象传递给前端vue表格从上插入的效果

前端表格组件没有用e-table，用得是vxe-table

vxe-table v4https://vxetable.cn/

java后端通过websocket依次传递对象给前端

部分代码

sendMessage使用的是websocket的发送数据方法//websocket发送数据

JSONObject使用的是alibaba的fastjson

for(int i=0;i<10;i++){
            try {
                DesignSyncCheckVoTest vo = new DesignSyncCheckVoTest();
                vo.setProgress(String.valueOf(i));
                vo.setCheckContent(String.valueOf(i));
                vo.setCheckResult(String.valueOf(i));
                vo.setStatus(String.valueOf(i));
                vo.setCost(String.valueOf(i));
                sendMessage(JSONObject.toJSONString(vo));//websocket发送数据;JSONObject使用的是alibaba的fastjson
                Thread.currentThread().sleep(200);
            }catch (Exception e){
                e.printStackTrace();
            }
        }

BS端vue接收数据，解析

designCheckResultRef是要在vxe-table中的ref属性使用到

接收到的数据需要用JSON解析下，

解析前后数据内容对比

解析前：

字符串

{"checkContent":"0","checkResult":"0","cost":"0","progress":"0","status":"0"}

解析后：

对象

{     "checkContent": "0",     "checkResult": "0",     "cost": "0",     "progress": "0",     "status": "0" }

 

const designCheckResultRef = ref()
const $table = designCheckResultRef.value
$table.insertAt(JSON.parse(e.data), 0)

倒序插入效果