Vue3 使用 Element Plus 实现卡片两列三行布局

在 Vue3 中使用 Element Plus 实现卡片呈两列三行的布局，可以使用el-row和el-col组件进行布局。以下是一个示例代码：

<template>
  <div>
    <el-row>
      <el-col :span="12" v-for="item in items" :key="item.id">
        <el-card :body-style="cardStyle">
          <div>{{ item.title }}</div>
          <div>{{ item.description }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, title: 'Card 1', description: 'Card 1 description' },
      { id: 2, title: 'Card 2', description: 'Card 2 description' },
      { id: 3, title: 'Card 3', description: 'Card 3 description' },
      { id: 4, title: 'Card 4', description: 'Card 4 description' },
      { id: 5, title: 'Card 5', description: 'Card 5 description' },
      { id: 6, title: 'Card 6', description: 'Card 6 description' },
    ]);

    const cardStyle = {
      padding: '20px',
      textAlign: 'center',
    };

    return {
      items,
      cardStyle,
    };
  },
};
</script>

在上面的代码中，通过el-row和el-col创建了一个两列的布局。使用v-for指令遍历items数组，生成对应的卡片组件。el-card组件用于创建卡片，并通过:body-style属性设置卡片的样式。

需要注意的是，上述代码中只展示了一个静态的示例，你可以根据自己的需求修改items数组来动态生成卡片。