无法直接绑定返回的Object属性,需要用js做一次对象转换后,才能绑定

<template>
<div>
<!--<button>添加服务器</button>-->
<el-table stripe :data="tableData3" style="width: 100%">
<el-table-column label="服务器IP" prop="Ip">
</el-table-column>
<el-table-column label="端口号" prop="Port">
</el-table-column>
<el-table-column label="是否Cluster" prop="IsCluster">
</el-table-column>
<el-table-column label="备注" prop="Comment">
</el-table-column>
</el-table> </div>
</template>
<script>
import axios from 'axios'
export default {
created () {
axios.get('http://localhost:8081/v1/redishosts')
.then((response) => {
var dataReturn = response.data
console.log(dataReturn)
var data = []
for (let i = 0; i < dataReturn.length; i++) {
var obj = {}
obj.Ip = dataReturn[i].Ip
obj.Port = dataReturn[i].Port
obj.IsCluster = dataReturn[i].IsCluster
obj.Comment = dataReturn[i].Comment
data[i] = obj
console.log(obj)
}
this.tableData3 = data
})
.catch(function (err) {
console.log(err)
})
},
data () {
return {
tableData3: []
}
}
}
</script>

注意js里面,遍历返回数据,把属性都赋值给obj。这样才能动态绑定

参考:https://segmentfault.com/q/1010000007746117/a-1020000007746246

element 表格无法绑定服务返回数据的更多相关文章

  1. EasyUI/TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 numberbox

    这两天研究了一下topjui的可编辑表格edatagrid,想在每一列的后面根据返回的数据判断是使用 combobox 还是 numberbox,期间遇到了一些坑,下面实现代码,需要的朋友可以参考一下 ...

  2. easyUI之datagrid绑定后端返回数据的两种方式

    先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...

  3. 基于NIO的同步非阻塞编程完整案例,客户端发送请求,服务端获取数据并返回给客户端数据,客户端获取返回数据

    这块还是挺复杂的,挺难理解,但是多练几遍,多看看研究研究其实也就那样,就是一个Selector轮询的过程,这里想要双向通信,客户端和服务端都需要一个Selector,并一直轮询, 直接贴代码: Ser ...

  4. vue+element 表格formatter数据格式化并且插入html标签

    前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...

  5. EasyUI datagrid数据表格的函数getData返回来的是什么

    EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...

  6. “数据提供程序或其他服务返回 E_FAIL 状态”

    “数据提供程序或其他服务返回 E_FAIL 状态” 的问题 ADO 连接SQL SERVER

  7. vue+Element 表格中的树形数据

    template部分   只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...

  8. vue,element列表大数据卡顿问题,vue列表渲染慢,element表格渲染慢,表格渲染慢(卡),表格全选卡

    https://github.com/livelyPeng/pl-table 一个表格组件(完美解决万级数据渲染卡顿问题),流畅渲染万级数据并不会影响到el-table的原有功能 分析: 前端UI框架 ...

  9. C# TCP实现多个客户端与服务端 数据 与 文件的传输

    C#菜鸟做这个东东竟然花了快三天的时间了,真是菜,菜,菜--- 下面是我用C#写的 一个简单的TCP通信,主要的功能有: (1) 多个客户端与服务器间的数据交流 (2)可以实现群发的功能 (3)客户端 ...

随机推荐

  1. “国家重点实验室”完全名单_洹水泛舟_新浪博客 - Google Chrome

    “国家重点实验室”完全名单 单位名称(序号)   国家重点实验室名称  建设单位 中国科学院(73) 1   半导体超晶格国家重点实验室  中国科学院半导体研究所 2   应用光学国家重点实验室  中 ...

  2. 记录Linux下解压大文件时的一次奇葩经历

    由于需要安装新的系统,使用wget下载tar包,8G多下载了1个多小时.解压完后的文件夹中的tar包数量明显不够,而且原始的tar包竟然不见了. 同样的操作又进行了一次,结果还是一样,不得不怀疑是哪里 ...

  3. windows10如何查看wifi密码

    1.首先,在你的电脑的右下角的WiFi的图标,右击它,选择"网络和internet设置"或者选择打开设置 :如下图 点击"更改适配器选项" 选择 WLAN选项, ...

  4. Jmeter(二十六)Jmeter-Question之“集成Jenkins”

    Jenkins,最初被称为Hudson,是一个Java语言编写的开源持续集成工具.Jenkins在持续集成领域的市场份额居于主导地位,其被各种规模的团队用于各种语言和技术的项目中,比如.net.rub ...

  5. [UE4]计算AimOffset偏移动画的角度

  6. MySQL 8.0的关系数据库新特性详解

    前言 MySQL 8.0 当前的最新版本是 8.0.4 rc,估计正式版本出来也快了.本文介绍几个 8.0 在关系数据库方面的主要新特性. 你可能已经知道 MySQL 从版本 5.7 开始提供了 No ...

  7. crm SDK 设置用户的上级

    /// <summary> /// 设置用户的上级 /// </summary> /// <param name="service">服务< ...

  8. 这些git命令判断提交到哪个分支哪个项目上

    git branch -r fuweikun@pengfei:~/e1_cp/AMSS$ git branch* 8939-E1-2104026-dev git config -l fuweikun@ ...

  9. cocos源码分析--绘制顺序LocalZOrder、GlobalZOrder、OrderOfArrival

    使用规则 节点的渲染顺序跟节点的三个成员变量有关(_localZOrder._globalZOrder._orderOfArrival)分别对应三个设置函数setLocalZOrder.setGlob ...

  10. IOS 7层协议

    ios七层 (1)物理层——Physical 这是整个OSI参考模型的最低层,它的任务就是提供网络的物理连接.所以,物理层是建立在物理介质上(而不是逻辑上的协议和会话),它提供的是机械和电气接口.主要 ...