vue3+element-plus, 后端返回对数据,部分属性在descriptions,tools, table不刷新?

匡博
  • 1
新手上路,请多包涵

server发送对象数,前端vue el-descriptions(描述列表) item显示数据, 随后在其上添加了el-tooltip(文字提示),提示挂载了el-table(表格)。 但现在item显示的数据和表格不会动态响应对象数组,不知道问题出在哪里,希望大神能解惑。

现象:
如下图,后端10s周期发送数据,FW在页面可被动态响应/刷新。但是BM out of date字段,console里已经变化,页面并未刷新。 FW和BM_out_of_date都是对象的proporty
image.png
image.png

实例:

vue
templete

        <el-descriptions border column=3>
            <el-descriptions-item width=80px label="BM out of date">
              <el-tooltip placement="bottom" effect="light">
                <template #content>
                  <el-table border :data="host.bm_his" :header-cell-style="tableHeaderStyle" 
                            height="180" :cell-style="tableRowStyle">
                    <el-table-column width="150" property="date" label="date"></el-table-column>
                    <el-table-column width="100" property="total" label="total"></el-table-column>
                    <el-table-column width="100" property="LD" label="LD"></el-table-column>
                    <el-table-column width="100" property="SOD" label="SOD"></el-table-column>
                    <el-table-column width="100" property="FW" label="FW"></el-table-column>
                  </el-table>
                </template>
                <p>{{ host.BM_out_of_date }}</p>
              </el-tooltip>
            </el-descriptions-item>

</templete>

JS
export default{

name: xxx,
data () {
    return {    
        testa: reactive([]), // this one can act rightly
        hosts: reactive([]), // this one not act normally
            }
        }
created() {
    socket.on("connect", ()=>{
      this.sid = socket.id;
      console.log(socket.id); })
    }
mounted() {
  socket.on('testa_bc', async (data) => {
      this.testa.splice(0, this.hosts.length);
    let tmp_hosts = JSON.parse(data);
    for(let i=0; i<tmp_hosts.length; i++){
      this.hosts.push(tmp_hosts[i]) }
    }
}

}

回复
阅读 273
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏