无法直接绑定返回的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. PAT 甲级 1006 Sign In and Sign Out (25)(25 分)

    1006 Sign In and Sign Out (25)(25 分) At the beginning of every day, the first person who signs in th ...

  2. PAT 乙级 1047 编程团体赛(20) C++版

    1047. 编程团体赛(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 编程团体赛的规则为:每个参赛队由若 ...

  3. springboot(整合事务和分布式事务)

    springboot +mybatis 单数据源,事务 事务:简单理解指的是一组操作,里面包含许多个单一的逻辑,只要有一个逻辑没有执行成功 ,那么都算失败.所有的数据都回归到最初的状态(回滚) 代码实 ...

  4. Scala集合类型详解

    Scala集合 Scala提供了一套很好的集合实现,提供了一些集合类型的抽象. Scala 集合分为可变的和不可变的集合. 可变集合可以在适当的地方被更新或扩展.这意味着你可以修改,添加,移除一个集合 ...

  5. 使用Spring MockMVC对controller做单元测试(转)

    https://www.cnblogs.com/ylty/p/6420738.html 1.对单一controller做测试. import org.junit.Before; import org. ...

  6. Jmeter(二十三)Jmeter-Question之“批量造数据”

    日常工作中,无论是在做功能测试.接口测试还是性能测试,经常会有这么一个场景出现,“那个谁谁谁,帮我加几条订单”,“那个某某某,给购物车增添几个产品”,“在数据库加几百条数据”...等等,通常少数量,或 ...

  7. zabbix监控ESXI主机(可用)

    ESXI6.0默认SSH关闭的,打开SSH的方法如下图: SSH打开后,主机会有警报,关闭警报的方法如下图 esxcli system  snmp  set  --communities  publi ...

  8. pandas中一列含有多种数据类型的转换:科学计算法转浮点数、字符映射

    import pandas as pd import re def getNum(x): """ 科学计数法和字符转浮点数 """ if r ...

  9. css3属性兼容性

    来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...

  10. OpenGL 画出雷达动态扫描效果(二) 非底图

    OpenGL 画出雷达动态扫描效果(一)中给出了已一张图片作为底图的雷达扫面程序 如果有漂亮的雷达底图的话,效果应该非常不错的,另外也可以直接手绘雷达框架 效果如下 雷达主体代码 glLineWidt ...