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

转载于:https://www.cnblogs.com/dannyyao/p/8052448.html