后台数据管理体系 - 项目架构设计-Vue3+axios+Element-plus（0920） ...

十三、文章分类页面 - [element-plus 表格]

Git堆栈：https://gitee.com/msyycn/vue3-hei-ma.git
基本架子 - PageContainer

功能需求说明：
   

• 基本架子-PageContainer封装
  
• 文章分类渲染 & loading处理
  
• 文章分类添加编辑[element-plus弹层]
  
• 文章分类删除
  

  

• 基本结构样式，用到了el-card 组件
  

1. <template>
2.   <el-card class="page-container">
3.     <template #header>
4.       <div class="header">
5.         <span>文章分类</span>
6.         <div class="extra">
7.           <el-button type="primary">添加分类</el-button>
8.         </div>
9.       </div>
10.     </template>
11.      ...
12.   </el-card>
13. </template>
15. <style lang="scss" scoped>
16. .page-container {
17.   min-height: 100%;
18.   box-sizing: border-box;
19.   .header {
20.     display: flex;
21.     align-items: center;
22.     justify-content: space-between;
23.   }
24. }
25. </style>

复制代码

• 考虑到多个页面复用，封装成组件
  
  
  
  • props 定制标题(父传子)
    
  • 默认插槽 default 定制内容主体
    
  • 具名插槽 extra 定制头部右侧额外的按钮
    
  
  

1. <script setup>
2. defineProps({
3.   title: {
4.     required: true,
5.     type: String
6.   }
7. })
8. </script>
10. <template>
11.   <el-card class="page-container">
12.     <template #header>
13.       <div class="header">
14.         <span>{{ title }}</span>
15.         <div class="extra">
16.           <slot name="extra"></slot>
17.         </div>
18.       </div>
19.     </template>
20.     <slot></slot>
21.   </el-card>
22. </template>
24. <style lang="scss" scoped>
25. .page-container {
26.   min-height: 100%;
27.   box-sizing: border-box;
28.   .header {
29.     display: flex;
30.     align-items: center;
31.     justify-content: space-between;
32.   }
33. }
34. </style>

复制代码

• 页面中直接使用测试 ( unplugin-vue-components 会自动注册)
  

• 文章分类测试：
  

1. <template>
2.   <page-container title="文章分类">
3.     <template #extra>
4.       <el-button type="primary"> 添加分类 </el-button>
5.     </template>
7.     主体部分
8.   </page-container>
9. </template>

复制代码

• 文章管理测试：
  

1. <template>
2.   <page-container title="文章管理">
3.     <template #extra>
4.       <el-button type="primary">发布文章</el-button>
5.     </template>
7.     主体部分
8.   </page-container>
9. </template>

复制代码

视图预览

文章分类渲染

封装API - 哀求获取表格数据

• 新建 api/article.js 封装获取频道列表的接口
  

1. import request from '@/utils/request'
2. export const artGetChannelsService = () => request.get('/my/cate/list')

复制代码

• 页面中调用接口，获取数据存储
  

1. const channelList = ref([])
3. const getChannelList = async () => {
4.   const res = await artGetChannelsService()
5.   channelList.value = res.data.data
6. }

复制代码

• ArticleChannel.vue
  

1. <script setup>
2. import { artGetChannelsService } from '@/api/article'
3. import {ref} from 'vue'
5. const channelList = ref([]) // 文章分类列表
6. // 获取文章分类列表
7. const getChannelList = async () => {
8.   const res = await artGetChannelsService()
9.   channelList.value = res.data.data
10.   console.log('文章分类列表',channelList.value);
11.   
12. }
14. // 调用获取文章分类列表
15. getChannelList()
16. </script>
18. <template>
19.   <div>
20.     <!-- 按需引入 -->
21.     <page-container title="文章分类">
22.     <!-- 右侧按钮 - 添加文章 - 具名插槽 -->
23.       <template #extra>
24.         <el-button>添加分类</el-button>
25.       </template>
26.       主体部分--表格
27.     </page-container>
28.    
29.   </div>
30. </template>
32. <style lang="scss" scoped>
33. </style>

复制代码

视图预览

el-table 表格动态渲染

1. <el-table :data="channelList" style="width: 100%">
2.   <el-table-column label="序号" width="100" type="index"> </el-table-column>
3.   <el-table-column label="分类名称" prop="cate_name"></el-table-column>
4.   <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
5.   <el-table-column label="操作" width="100">
6.     <template #default="{ row }">
7.       <el-button
8.         :icon="Edit"
9.         circle
10.         plain
11.         type="primary"
12.         @click="onEditChannel(row)"
13.       ></el-button>
14.       <el-button
15.         :icon="Delete"
16.         circle
17.         plain
18.         type="danger"
19.         @click="onDelChannel(row)"
20.       ></el-button>
21.     </template>
22.   </el-table-column>
23.   <template #empty>
24.     <el-empty description="没有数据" />
25.   </template>
26. </el-table>
29. const onEditChannel = (row) => {
30.   console.log(row)
31. }
32. const onDelChannel = (row) => {
33.   console.log(row)
34. }

复制代码

预览视图

el-table 表格 loading 效果

• 定义变量，v-loading绑定
  

1. const loading = ref(false)
3. <el-table v-loading="loading">

复制代码

• 发送哀求前开启，哀求竣事关闭
  

1. const getChannelList = async () => {
2.   loading.value = true
3.   const res = await artGetChannelsService()
4.   channelList.value = res.data.data
5.   loading.value = false
6. }

复制代码

ArticleChannel.vue

1. <script setup>
2. import { artGetChannelsService } from '@/api/article'
3. import { Delete,Edit } from   '@element-plus/icons-vue'
5. import {ref} from 'vue'
7. const channelList = ref([]) // 文章分类列表
8. const loading = ref(false) //加载状态
9. // 获取文章分类列表
10. const getChannelList = async () => {
11.   // 发请求之前先将loading设置为true
12.   loading.value = true
13.   // 调用接口
14.   const res = await artGetChannelsService()
15.   channelList.value = res.data.data
16.   // 发完请求，关闭loading
17.   loading.value = false
18.   // console.log('文章分类列表',channelList.value);
19.   
20. }
22. // 调用获取文章分类列表
23. getChannelList()
26. // 编辑文章分类
27. const onEditChannel =(row,$index) =>{
28. console.log(row,$index)
30. }
32. // 删除文章分类
33. const onDelChannel =(row,$index)=>{
34.   console.log(row,$index)
36. }
37. </script>
39. <template>
40.   <div>
41.     <!-- 按需引入 -->
42.     <page-container title="文章分类">
43.     <!-- 右侧按钮 - 添加文章 - 具名插槽 -->
44.       <template #extra>
45.         <el-button>添加分类</el-button>
46.       </template>
47.       <!-- 主体部分--表格 -->
48.       <el-table :data="channelList" style="width: 100%" v-loading="loading">
49.           <el-table-column   label="序号"    type="index"  width="100" ></el-table-column>
50.           <el-table-column   label="分类名称" prop="cate_name" ></el-table-column>
51.           <el-table-column   label="分类别名" prop="cate_alias" ></el-table-column>
52.           <el-table-column   label="操作"      width="100">
53.           <template #default="{row,$index}">
54.              <el-button  @click="onEditChannel(row,$index)" plain :icon="Edit" circle type="primary" ></el-button>
55.              <el-button  @click="onDelChannel(row,$index)" plain :icon="Delete" circle type="danger" ></el-button>
56.           </template>
57.           </el-table-column>
58.       </el-table>
59.     </page-container>
60.    
61.   </div>
62. </template>
64. <style lang="scss" scoped>
65. </style>

复制代码

哀求到的数组为空时

1. channelList.value = []

复制代码

添加element-plus插槽：

1.      <!-- 主体部分--表格 -->
2.       <el-table :data="channelList" style="width: 100%" v-loading="loading">
3.           <el-table-column   label="序号"    type="index"  width="100" ></el-table-column>
4.           <el-table-column   label="分类名称" prop="cate_name" ></el-table-column>
5.           <el-table-column   label="分类别名" prop="cate_alias" ></el-table-column>
6.           <el-table-column   label="操作"      width="100">
7.           <template #default="{row,$index}">
8.              <el-button  @click="onEditChannel(row,$index)" plain :icon="Edit" circle type="primary" ></el-button>
9.              <el-button  @click="onDelChannel(row,$index)" plain :icon="Delete" circle type="danger" ></el-button>
10.           </template>
11.           </el-table-column>
12.          
13.          <!-- 没有数据 -->
14.          <template #empty>
15.       <el-empty description="暂无数据"></el-empty>
16.       </template>
17.       </el-table>

复制代码

下期见！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。