@引子

本系列组件基于Element-Plus开发，已发布为开源组件库，欢迎使用！
npm i @admyu/ep-extension

@按钮组

实现效果

页面部署

<template>
   <div class="wrapper">
      <!-- 批量操作按钮组 -->
      <BtnGroup
         ref="bgRef"
         :groupBtns="groupBtns"
         @group-btn-click="onGroupBtnClick">
         <template #delete>
            <el-icon><Delete /></el-icon>
         </template>

         <template #export>
            <el-icon><DocumentCopy /></el-icon>
         </template>

         <template #add>
            <el-icon><Plus /></el-icon>
         </template>
      </BtnGroup>

      <!-- 表格+分页器 -->
      ...

      <!-- 默认隐藏的对话框 -->
      ...
   </div>
</template>

@数据表格

实现效果

页面部署

<template>
   <div class="wrapper">
      <!-- <p>currentPage: {{ currentPage }}</p> -->

      <!-- 批量操作按钮组 -->
      ...

      <!-- 表格+分页器 -->
      <!-- @page-change="onEpPageChange" -->
      <EpTable
         ref="refEpTable"
         :tableData="tableData"
         :page-size="10"
         :cols="cols"
         :avgColWidth="100"
         @delete-item="deleteItem">
         
         <!-- 这里的东东覆盖名为poster的插槽 row为poster插槽暴露出来的数据 -->
         <template #poster="{ row }">
            <div style="display: flex; align-items: center">
               <el-image :src="row.poster" />
            </div>
         </template>

         <!-- 这里的东东覆盖名为poster的插槽 row为poster插槽暴露出来的数据 -->
         <template #actors="{ row }">
            <div style="display: flex; align-items: center">
               <el-image :src="row.actors[0].avatarAddress" />
            </div>
         </template>
      </EpTable>

      <!-- 默认隐藏的对话框 -->
      ...
   </div>
</template>

@确认弹窗

实现效果

页面部署

<template>
   <div class="wrapper">
      <!-- <p>currentPage: {{ currentPage }}</p> -->

      <!-- 批量操作 -->
      <BtnGroup...
      </BtnGroup>

      <!-- 表格+分页器 -->
      <!-- @page-change="onEpPageChange" -->
      <EpTable...
      </EpTable>

      <!-- 默认隐藏的对话框 -->
      <EpDialog
         ref="refEpDialog"
         :dialogMode="dialogMode"></EpDialog>
   </div>
</template>

@递归菜单

实现效果

页面部署

<template>
   <!-- 页头 -->
   <MyPageHeader...</MyPageHeader>

   <main>
      <div class="left">
         <!-- 递归菜单 -->
         <EpMenu
            :menu="adminMenu"
            :activeIndex="currentMenuIndex"></EpMenu>
      </div>

      <!-- 右侧内容区 -->
      <div class="right">
         <router-view...</router-view>
      </div>
   </main>
</template>

“这不需要测试，肯定是好的，不必担心！”