zoukankan      html  css  js  c++  java
  • element 表格无法绑定服务返回数据

    无法直接绑定返回的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

  • 相关阅读:
    .Net常见笔试题
    冒泡排序算法 C#版
    Bundle捆绑压缩技术
    异步Ajax
    HtmlHelper总结
    HtmlHelper的扩展分页方法
    WCF
    程序猿值得看的几个技术网站(记录)
    Struts2和SpringMVC的区别
    nginx配置文件作用介绍
  • 原文地址:https://www.cnblogs.com/dannyyao/p/8052448.html
Copyright © 2011-2022 走看看