mvc采用element分页的问题

Question

我现在是使用了vue和elementui，想实现点击左侧导航栏，顶部有相关标签，并且载入子页面，怎么实现啊

Answer 1

以下回复引自免费微信小程序：皆我百晓生。 如问题解决，还请采纳。如仍有疑问，请回复留言或私信博主，以便获得更精准的帮助。

在VUE.JS中，你可以通过组件的方式来实现这个功能。首先，在你的根元素（<DIV>）上添加一个<EL-TABS>，然后在其中添加一个<EL-TAB-PANE>来展示相关的子页面。

以下是一个简单的示例：

<DIV>
  <EL-TABS V-MODEL="ACTIVENAME">
    <!-- 需要显示的子页面 -->
    <EL-TAB-PANE LABEL="TAB1" NAME="TAB1">
      <!-- 您可以在这里放置您的内容 -->
    </EL-TAB-PANE>

    <!-- 需要隐藏的子页面 -->
    <EL-TAB-PANE LABEL="TAB2" NAME="TAB2">
      <!-- 您可以在这里放置您的内容 -->
    </EL-TAB-PANE>
  </EL-TABS>
</DIV>

在这个例子中，当用户点击右侧的“导航”按钮时，就会跳转到对应的子页面。

如果你想要在子页面加载更多内容，你可以在子页面的<TEMPLATE>里使用V-FOR语句来循环显示更多的数据。例如：

<TEMPLATE>
  <DIV CLASS="CONTENT">
    <!-- 用于显示的内容 -->
  </DIV>
</TEMPLATE>

<SCRIPT>
EXPORT DEFAULT {
  DATA() {
    RETURN {
      ACTIVETAB: 'TAB1'
    }
  },
  COMPUTED: {
    CONTENT() {
      // 使用VUE的COMPUTED方法获取当前ACTIVETAB的数据
      CONST { ACTIVETAB } = THIS;
      RETURN [
        '<DIV>CONTENT 1</DIV>',
        '<DIV>CONTENT 2</DIV>'
      ].MAP((ITEM) => `<DIV>${ITEM}</DIV>`);
    }
  }
}
</SCRIPT>

以上就是如何在VUE.JS中实现ELEMENTUI中的导航栏、顶部标签和子页面的方法。