[{"a":277.55,"b":397.53,"c":33.8,"d":1000.0,"e":76.56,"f":294.81,"g":63.43,"h":7.14}, {"a":1156.41,"b":206.12,"c":116.7,"d":843.61,"e":2096.07,"f":1568.2,"g":55.81,"h":12.0}]在element ui中如何把这种形式的list赋值给tableData,在表格上显示出来
时间: 2023-07-02 17:17:39 浏览: 53
您可以使用Element UI中的Table组件来展示这种形式的list。首先需要定义表格的表头,然后将数据赋值给tableData。下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="a" label="A"></el-table-column>
<el-table-column prop="b" label="B"></el-table-column>
<el-table-column prop="c" label="C"></el-table-column>
<el-table-column prop="d" label="D"></el-table-column>
<el-table-column prop="e" label="E"></el-table-column>
<el-table-column prop="f" label="F"></el-table-column>
<el-table-column prop="g" label="G"></el-table-column>
<el-table-column prop="h" label="H"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{"a":277.55,"b":397.53,"c":33.8,"d":1000.0,"e":76.56,"f":294.81,"g":63.43,"h":7.14},
{"a":1156.41,"b":206.12,"c":116.7,"d":843.61,"e":2096.07,"f":1568.2,"g":55.81,"h":12.0}
]
}
}
}
</script>
```
在这个示例代码中,我们定义了一个Table组件,并将数据赋值给tableData。然后我们定义了8列表头,对应每个对象的8个属性。最后在el-table-column组件中使用prop属性绑定数据的属性名,使用label属性指定表头的名称。这样就可以在表格上展示这个数据了。