希希莱娜
2019-10-11 14:07
采纳率: 64.3%
浏览 2.2k

关于vue.js中data里面数组和对象的理解和显示问题

我mock.js造假数据后,返回给页面

Object
config: {url: "/params/equipments/tvmView", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
data: Array(4)
0: {__ob__: Observer}
1: {__ob__: Observer}
2: {__ob__: Observer}
3: {__ob__: Observer}
length: 4
__ob__: Observer {value: Array(4), dep: Dep, vmCount: 0}
__proto__: Array

如图,返回的是一个对象,里面的data是一个数组,数组里面包含四个对象

data: Array(4)
0:
tvmfrom: "AC"
tvmto: Array(3)
0: "彩虹岛"
1: "铁皮屋"
2: "外婆饼店"

我设定的是两个tvmfrom 和tvmto,其中的tvmto是一个数组,之前一个数组的时候我是

 data(){
        return{
            tableData: [],
            tvmToStation:[],
        }
    },

     getTvmViewParams(){
        this.$axios.params.getParams().then(res=>{
        this.tableData = res.data
        this.tvmToStation = res.data[0].tvmto
        //this.tvmToStation = JSON.stringify(res.data)
        //数组深拷贝 得到的是数组[{}]
        //console.log(JSON.parse(JSON.stringify(res.data)))
        })
    },
                然后放到我表格中
<el-table-column prop="tvmfrom" label="起始站" >
</el-table-column>
<el-table-column label="目标站点">
<!-- <template slot-scope="scope" >
<el-tag>{{scope.row.tvmto}}</el-tag>
</template> -->
<el-tag v-for="index in tvmToStation" :key="index">{{index}}</el-tag>
</el-table-column>

这样写肯定是错的,tvmfrom的我是直接用prop绑定 那我怎么去获取tvmto的数组数据,遍历放到tag中
效果是
图片说明

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • _鹿慕溪水 2019-10-11 14:24
    已采纳
    <el-table
                height="400"
                v-loading="dataListLoading"
                :data="dataList"
                border
                @selection-change="dataListSelectionChangeHandle"
                style="width: 100%;">
    </el-table>
    
    

    用element的表格组件,传入你的data,设置显示的column属性就好了,你代码中写的

    <el-table-column prop="tvmfrom" label="起始站" >
    </el-table-column>
    
    

    这是el-table组件中的字段标签,你不能直接把你返回的数据列表放到这个字段标签上,这个字段标签应该写你data中的字段;

    参考element-ui的中文文档 https://element.eleme.cn/#/zh-CN/component/table

    打赏 评论

相关推荐 更多相似问题