我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中
效果是
<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