element 表格无法绑定服务返回数据
无法直接绑定返回的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 表格无法绑定服务返回数据的更多相关文章
- EasyUI/TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 numberbox
这两天研究了一下topjui的可编辑表格edatagrid,想在每一列的后面根据返回的数据判断是使用 combobox 还是 numberbox,期间遇到了一些坑,下面实现代码,需要的朋友可以参考一下 ...
- easyUI之datagrid绑定后端返回数据的两种方式
先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...
- 基于NIO的同步非阻塞编程完整案例,客户端发送请求,服务端获取数据并返回给客户端数据,客户端获取返回数据
这块还是挺复杂的,挺难理解,但是多练几遍,多看看研究研究其实也就那样,就是一个Selector轮询的过程,这里想要双向通信,客户端和服务端都需要一个Selector,并一直轮询, 直接贴代码: Ser ...
- vue+element 表格formatter数据格式化并且插入html标签
前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...
- EasyUI datagrid数据表格的函数getData返回来的是什么
EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...
- “数据提供程序或其他服务返回 E_FAIL 状态”
“数据提供程序或其他服务返回 E_FAIL 状态” 的问题 ADO 连接SQL SERVER
- vue+Element 表格中的树形数据
template部分 只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...
- vue,element列表大数据卡顿问题,vue列表渲染慢,element表格渲染慢,表格渲染慢(卡),表格全选卡
https://github.com/livelyPeng/pl-table 一个表格组件(完美解决万级数据渲染卡顿问题),流畅渲染万级数据并不会影响到el-table的原有功能 分析: 前端UI框架 ...
- C# TCP实现多个客户端与服务端 数据 与 文件的传输
C#菜鸟做这个东东竟然花了快三天的时间了,真是菜,菜,菜--- 下面是我用C#写的 一个简单的TCP通信,主要的功能有: (1) 多个客户端与服务器间的数据交流 (2)可以实现群发的功能 (3)客户端 ...
随机推荐
- AS3面试题 个人理解
现在as3面试 感觉就那几个题目来回考.有了题库,大家都看了 都答上来了 题目本身也就失去了考核的意义.而且题目本身也有很多偏的(不常用的)在考. 真正的面试官现在肯定也不会把笔试成绩当作标准.所谓: ...
- 【IIS错误 - HTTP 错误 500.19】HTTP 错误 500.19- Internal Server Error 错误解决方法(二)
昨天在 windows 7 下用 IIS 7.5 运行一个以前用 .NET Framework 3.5 写的项目,发现总是出现 500.19 错误,如下: 百度了好久,没找到解决问题确切的答案,我也知 ...
- P2670扫雷
链接 这是一个并不像搜索的题(其实它是个循环) 对于输入的a数组,一个一个遍历下来,如果a[i][j]是雷,那(i,j)周围8个点对应的位置雷数就+1(用b数组记录),注意不能超出边界,输出时,如果a ...
- 基于Kafka消息驱动最终一致事务(二)
实现用例分析 上篇基于Kafka消息驱动最终一致事务(一)介绍BASE的理论,接着我们引入一个实例看如何实现BASE,我们会用图7显示的算法实现BASE.
- Java-Runoob-高级教程-实例-方法:01. Java 实例 – 方法重载
ylbtech-Java-Runoob-高级教程-实例-方法:01. Java 实例 – 方法重载 1.返回顶部 1. Java 实例 - 方法重载 Java 实例 先来看下方法重载(Overloa ...
- mysql默认8小时连接断开机制解决
转载连接:http://www.myexception.cn/database/1639209.html 本文提供了对c3p0与DBCP连接池连接MySql数据库时, 8小时内无请求自动断开连接的解决 ...
- go中的make和new的区别
适用范围:make 只能创建内建类型(slice map channel), new 则是可以对所有类型进行内存分配 返回值: new 返回指针, make 返回引用 填充值: new 填充零值, m ...
- Centos7.3安装部署Zabbix3.4.15(成功可用)
1.Xshell 远程连接到Centos7.3.连接centos 系统后,首先关闭防火墙和SELINUX,如不关闭会各种拦截,网页访问等故障,容易造成蛋疼哦.#systemctl stop firew ...
- TCP/IP SIGPIPE信号
往一个已经接受FIN的套接中写是允许的,接受到FIN仅仅代表对方不再发送数据. 在收到RST段之后,如果在调用write就 会产生SIGPIPE信息,对于这个信号的处理我们通常 解决方法 signal ...
- spring boot controller设置 @Transactional 不回滚的解决办法
@Transactional @ApiOperation(value = "添加一个用户信息") @RequestMapping(value = "/create&quo ...