vue 使用 el-descriptions 数据 [ {name:"yasw",state:"0",old:"1"}, {name:"yasw1",state:"0",old:"1"}, {name:"yasw2",state:"0",old:"1"}, {name:"yasw3",state:"0",old:"1"}, {name:"yasw4",state:"0",old:"1"} ],写一个一行三列,label分别为名称,初期,末期的示例
时间: 2023-07-09 12:54:18 浏览: 62
详解vue中v-bind:style效果的自定义指令
可以这样写:
```html
<el-descriptions :bordered="true" :column="3">
<el-descriptions-item label="名称" v-for="item in data" :key="item.name">{{ item.name }}</el-descriptions-item>
<el-descriptions-item label="初期" v-for="item in data" :key="item.name">{{ item.state }}</el-descriptions-item>
<el-descriptions-item label="末期" v-for="item in data" :key="item.name">{{ item.old }}</el-descriptions-item>
</el-descriptions>
```
其中 `data` 是你提供的数据数组。这样写就可以实现一行三列,每列分别为名称、初期和末期,每行对应数据数组中的一个元素。
阅读全文