无法直接绑定返回的Object属性,需要用js做一次对象转换后,才能绑定
<template> <div> <!--<button>添加服务器</button>--> <el-table stripe :data="tableData3" style=" 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