使用 element 框架的 table(表格)、，layout布局， container布局， form 表单， Card 卡片，Carousel 走马灯 组件的不同形态代码

Element UI 是一套基于 Vue.js 的开源 UI 组件库，它提供了一套丰富且易用的组件用于构建前端界面。下面我会简要地介绍几个关键组件的基本用法：

1. **table 表格**:

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <!-- 添加更多列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 示例数据
        { date: '2022-01-01', name: '张三' },
        // ...
      ]
    };
  }
};
</script>

2. **layout 布局** (例如，栅格系统 `el-row` 和 `el-col`):

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">列 1</el-col>
      <el-col :span="8">列 2</el-col>
      <el-col :span="8">列 3</el-col>
    </el-row>
  </div>
</template>

3. **container 布局** (默认的容器组件):

<template>
  <el-container>
    <el-header>头部区域</el-header>
    <el-main>主要内容区域</el-main>
    <el-footer>底部区域</el-footer>
  </el-container>
</template>

4. **form 表单** (例如，表单元素 `el-form` 和 `el-form-item`):

<template>
  <el-form :model="formData">
    <el-form-item label="邮箱">
      <el-input v-model="formData.email"></el-input>
    </el-form-item>
    <!-- 添加更多字段 -->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        email: '',
        // ...
      }
    };
  }
};
</script>

5. **card 卡片** (`el-card`):

<template>
  <el-card>
    <div slot="header">卡片标题</div>
    <div slot="body">卡片内容</div>
  </el-card>
</template>

6. **carousel 走马灯** (`el-carousel`):

<template>
  <el-carousel indicator-position="outside" @change="handleChange">
    <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
      <img :src="item.src" alt="图片描述">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      carouselItems: [
        { src: 'image1.jpg' },
        { src: 'image2.jpg' },
        // ...
      ],
    };
  },
  methods: {
    handleChange(index) {
      console.log(`当前选中项索引: ${index}`);
    }
  }
};
</script>

请注意，以上示例代码需要配合 Element UI 的 CSS 文件一起使用，并在项目中安装并引入 Element UI 库。