VUE实现点击导航栏进行切换右边内容

首先看看效果，左边导航栏进行切换，右边内容进行切换

---

代码如下

---

<div><el-tabs :tab-position="tabPosition" style="height: 800px;"><el-tab-pane label="通知通告">通知通告</el-tab-pane><el-tab-pane label="经验交流">经验交流</el-tab-pane><el-tab-pane label="学习园地">学习园地</el-tab-pane><el-tab-pane label="基层动态">基层动态</el-tab-pane><el-tab-pane label="车辆安全">车辆安全</el-tab-pane><el-tab-pane label="烹饪美食">烹饪美食</el-tab-pane><el-tab-pane label="卫生常识">卫生常识</el-tab-pane><el-tab-pane label="采购方式">采购方式</el-tab-pane><el-tab-pane label="招投标项目公式">招投标项目公式</el-tab-pane><el-tab-pane label="装备采购政治">装备采购政治</el-tab-pane></el-tabs>
</div>

<script>

export default {

 data() {

   return {

     tabPosition: 'left'

    };

  }

};

</script>