类别选择组件

• tab组件

  • 组件切换的交互逻辑已经内置在组件内部, 用户无需配置, 保持默认即可
  • 只需要在el-tab-pane组件的插槽中插入想要显示的html标签就可以了
  • 非常简单简洁容易使用

  示例

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="User" name="first">User</el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>

  指向原始笔记的链接

• 菜单组件

  • 通过配置路由path来完成内容显示切换逻辑
  • 使用菜单项中的index属性来指定切换后的路由path
  • https://element-plus.org/zh-CN/component/menu.html
  • 自带折叠功能
    • 把文字折叠, 只剩图标

  指向原始笔记的链接