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 19:54:18 浏览: 123
可以这样写:
```
<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>
```
其中,`:bordered="true"` 用于显示边框,`:column="3"` 用于设置列数为3。
`<el-descriptions-item>` 用于添加每个项目,`label` 属性用于设置项目的名称,`v-for` 循环遍历数据,`:key` 属性用于设置循环的唯一标识符。在示例中,我们分别添加了3个 `<el-descriptions-item>`,分别对应名称、初期和末期,使用 `v-for` 循环遍历数据,根据数据中的属性来填充相应的值。
相关问题
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分别为名称,初期,末期的示例
可以这样写:
```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` 是你提供的数据数组。这样写就可以实现一行三列,每列分别为名称、初期和末期,每行对应数据数组中的一个元素。
阅读全文