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

Question

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

Answer 1

<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