element ui 上下页面开发

在 Element UI 中实现上下页面开发可以使用 Tabs（选项卡）组件或 Steps（步骤条）组件。这两个组件都可以帮助你实现多个页面之间的切换，具体使用哪个组件取决于你的业务需求。

如果你的页面是一组相关的数据，需要用户逐步填写完整的话，可以使用 Steps 组件来实现上下页面。使用 Steps 组件可以让用户清晰地了解当前所处的步骤，并可以很方便地回到之前的步骤进行修改或查看。下面是一个使用 Element UI Steps 组件实现上下页面的示例代码：

<template>
  <div>
    <el-steps :active="activeStep" finish-status="success">
      <el-step title="第一步"></el-step>
      <el-step title="第二步"></el-step>
      <el-step title="第三步"></el-step>
    </el-steps>
    <div v-if="activeStep === 1">
      <!-- 第一步页面的内容 -->
    </div>
    <div v-if="activeStep === 2">
      <!-- 第二步页面的内容 -->
    </div>
    <div v-if="activeStep === 3">
      <!-- 第三步页面的内容 -->
    </div>
    <div>
      <el-button type="primary" @click="prevStep" v-if="activeStep > 1">上一步</el-button>
      <el-button type="primary" @click="nextStep" v-if="activeStep < 3">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeStep: 1
    };
  },
  methods: {
    prevStep() {
      this.activeStep--;
    },
    nextStep() {
      this.activeStep++;
    }
  }
};
</script>

在上面的代码中，我们使用了 Steps 组件来实现上下页面的切换。在 data 中定义了一个 activeStep 变量，表示当前所处的步骤。在 methods 中定义了两个方法：prevStep 和 nextStep，分别用于切换到上一步和下一步。在模板中，我们使用 el-steps 标签来定义步骤条，并根据 activeStep 变量的值来显示不同的页面内容。同时，我们也添加了上一步和下一步按钮，通过触发 prevStep 和 nextStep 方法来实现步骤的切换。

如果你的页面是多个独立的页面，并且需要在这些页面之间进行切换，可以使用 Tabs 组件来实现上下页面。使用 Tabs 组件可以让用户快速地切换到不同的页面，同时也可以让用户清晰地了解当前所处的页面。下面是一个使用 Element UI Tabs 组件实现上下页面的示例代码：

<template>
  <div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="页面1" name="1">
        <!-- 页面1的内容 -->
      </el-tab-pane>
      <el-tab-pane label="页面2" name="2">
        <!-- 页面2的内容 -->
      </el-tab-pane>
      <el-tab-pane label="页面3" name="3">
        <!-- 页面3的内容 -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '1'
    };
  }
};
</script>

在上面的代码中，我们使用了 Tabs 组件来实现上下页面的切换。在 data 中定义了一个 activeTab 变量，表示当前所处的页面。在模板中，我们使用 el-tabs 标签来定义选项卡，并使用 el-tab-pane 标签来定义每个页面的内容。同时，我们也将 activeTab 绑定到 el-tabs 组件上，从而实现页面的切换。