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 22:54:18 浏览: 57
可以这样写:
```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` 是你提供的数据数组。这样写就可以实现一行三列,每列分别为名称、初期和末期,每行对应数据数组中的一个元素。
相关问题
vue 使用 el-descriptions 一行三个重复多行
你可以通过使用 `el-row` 和 `el-col` 栅格布局组件,将 `el-descriptions` 放在 `el-col` 中,再将多个 `el-col` 放在同一个 `el-row` 中,从而实现一行显示多个 `el-descriptions`,并重复多行的效果。具体代码如下:
```html
<template>
<div>
<el-row>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'张三'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'男'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="18"></el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'李四'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'女'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="20"></el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'王五'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'男'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="22"></el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
<el-row>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'赵六'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'女'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="25"></el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'钱七'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'男'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="28"></el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'孙八'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'女'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="30"></el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
</div>
</template>
```
在上述代码中,我们使用 `el-row` 和 `el-col` 组件将 `el-descriptions` 组件进行布局,通过设置 `:span` 属性控制每个 `el-col` 的宽度,从而实现一行显示多个 `el-descriptions` 的效果。同时,我们在每个 `el-descriptions` 组件中设置了不同的数据,以达到重复多行的效果。
vue中elenemt el-descriptions-item label-class-name使用例子
在Vue的Element UI库中,el-descriptions-item是用于渲染描述列表的组件。label-class-name属性用于为标签添加自定义的类名。
下面是el-descriptions-item的使用例子:
```html
<template>
<el-descriptions title="User Info">
<el-descriptions-item label="Name" label-class-name="custom-label">
John Doe
</el-descriptions-item>
<el-descriptions-item label="Age" label-class-name="custom-label">
25
</el-descriptions-item>
<el-descriptions-item label="Email" label-class-name="custom-label">
johndoe@example.com
</el-descriptions-item>
</el-descriptions>
</template>
<style>
.custom-label {
color: red;
}
</style>
```
在上面的例子中,我们给每个el-descriptions-item的label添加了一个自定义的类名custom-label,并将其颜色设置为红色。