vue 使用 el-descriptions 一行三个重复多行 溢出滚动

可以尝试以下做法：

1. 将 el-descriptions 包裹在一个 div 容器中，并设置该容器的高度和 overflow 属性为 auto。

2. 设置 el-descriptions 的每一列的宽度为 33.33%，这样每行就会显示三列。

3. 如果 el-descriptions 中的内容溢出，就会自动出现滚动条。

以下是示例代码：

<div style="height: 200px; overflow: auto;">
  <el-descriptions :items="items" :bordered="true" size="small">
    <!-- 设置每列的宽度为 33.33% -->
    <el-descriptions-item v-for="item in items" :key="item.label" :label="item.label" :span="8">{{ item.value }}</el-descriptions-item>
  </el-descriptions>
</div>

注意：这里的 items 是 el-descriptions 的数据源，需要在 Vue 实例中定义。

相关问题

vue 使用 el-descriptions 一行三个重复多行

你可以通过使用 `el-row` 和 `el-col` 栅格布局组件，将 `el-descriptions` 放在 `el-col` 中，再将多个 `el-col` 放在同一个 `el-row` 中，从而实现一行显示多个 `el-descriptions`，并重复多行的效果。具体代码如下：

<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 使用 el-descriptions v-for 示例 一行三个

好的，下面是一个使用`el-descriptions`和`v-for`实现一行三个的示例代码：

<el-descriptions :column="3">
  <el-descriptions-item v-for="(item, index) in itemList" :key="index" :label="item.label" :span="1">
    {{ item.value }}
  </el-descriptions-item>
</el-descriptions>

在上面的代码中，我们使用了`el-descriptions`组件来显示一组属性列表。`column`属性设置为3，表示每行显示3个属性。然后，我们使用`v-for`指令遍历`itemList`数组中的每个元素，并使用`el-descriptions-item`组件来显示每个属性的标签和值。`span`属性设置为1，表示每个属性占据一列的宽度。

希望这个示例可以帮助你解决问题！如有其他问题，欢迎继续提问。