一个页面分为左右两栏，怎么使用vue+elementUI做，要求写在一个el-card中里面写两栏，而不是写两个card

在 Vue 中使用 Element UI 实现一个页面包含左右两个等宽的侧边栏（左右栏都在同一个 `el-card` 中），你可以按照以下步骤操作：

1. 首先，在你的项目中引入所需的 Element UI 组件，例如 `el-col`, `el-row`, 和 `el-card`。确保已经安装并引入了 Element UI 的 CSS。

<template>
  <div>
    <el-card class="main-card">
      <div class="card-wrapper">
        <el-row type="flex" justify="space-between">
          <el-col :span="24" class="left-column">
            <!-- 左侧栏内容 -->
            <p>左侧栏内容</p>
            <!-- 更多左侧栏组件... -->
          </el-col>
          <el-col :span="24" class="right-column">
            <!-- 右侧栏内容 -->
            <p>右侧栏内容</p>
            <!-- 更多右侧栏组件... -->
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.main-card {
  display: flex;
}

.card-wrapper {
  padding: 16px; /* 根据需要调整内边距 */
}
.left-column,
.right-column {
  flex-grow: 1; /* 确保两边栏等分剩余空间 */
}
</style>

在这个模板中，我们创建了一个 `el-card` 元素，并在其内部添加了一个 `el-row` 来布局左右两侧的内容。通过设置 `type="flex"` 和 `justify="space-between"`，我们可以创建等宽的列。每个列都分配了 `:span="24"`，这意味着它们各占总宽度的50%。