网站建设会遇到哪些问题,石家庄网页定制开发,搜索引擎优化的英文,三网合一营销型全网站十三、文章分类页面 - [element-plus 表格]
Git仓库#xff1a;https://gitee.com/msyycn/vue3-hei-ma.git
基本架子 - PageContainer
功能需求说明#xff1a; 基本架子-PageContainer封装文章分类渲染 loading处理文章分类添加编辑[element-plus弹层]文章分类删除…十三、文章分类页面 - [element-plus 表格]
Git仓库https://gitee.com/msyycn/vue3-hei-ma.git
基本架子 - PageContainer
功能需求说明 基本架子-PageContainer封装文章分类渲染 loading处理文章分类添加编辑[element-plus弹层]文章分类删除 基本结构样式用到了el-card 组件
templateel-card classpage-containertemplate #headerdiv classheaderspan文章分类/spandiv classextrael-button typeprimary添加分类/el-button/div/div/template.../el-card
/templatestyle langscss scoped
.page-container {min-height: 100%;box-sizing: border-box;.header {display: flex;align-items: center;justify-content: space-between;}
}
/style考虑到多个页面复用封装成组件 props 定制标题(父传子)默认插槽 default 定制内容主体具名插槽 extra 定制头部右侧额外的按钮
script setup
defineProps({title: {required: true,type: String}
})
/scripttemplateel-card classpage-containertemplate #headerdiv classheaderspan{{ title }}/spandiv classextraslot nameextra/slot/div/div/templateslot/slot/el-card
/templatestyle langscss scoped
.page-container {min-height: 100%;box-sizing: border-box;.header {display: flex;align-items: center;justify-content: space-between;}
}
/style页面中直接使用测试 ( unplugin-vue-components 会自动注册)
文章分类测试
templatepage-container title文章分类template #extrael-button typeprimary 添加分类 /el-button/template主体部分/page-container
/template文章管理测试
templatepage-container title文章管理template #extrael-button typeprimary发布文章/el-button/template主体部分/page-container
/template视图预览
文章分类渲染
封装API - 请求获取表格数据
新建 api/article.js 封装获取频道列表的接口
import request from /utils/request
export const artGetChannelsService () request.get(/my/cate/list)页面中调用接口获取数据存储
const channelList ref([])const getChannelList async () {const res await artGetChannelsService()channelList.value res.data.data
}ArticleChannel.vue
script setup
import { artGetChannelsService } from /api/article
import {ref} from vueconst channelList ref([]) // 文章分类列表
// 获取文章分类列表
const getChannelList async () {const res await artGetChannelsService()channelList.value res.data.dataconsole.log(文章分类列表,channelList.value);}// 调用获取文章分类列表
getChannelList()
/scripttemplatediv!-- 按需引入 --page-container title文章分类 !-- 右侧按钮 - 添加文章 - 具名插槽 --template #extrael-button添加分类/el-button/template主体部分--表格/page-container/div
/templatestyle langscss scoped
/style
视图预览 el-table 表格动态渲染
el-table :datachannelList stylewidth: 100%el-table-column label序号 width100 typeindex /el-table-columnel-table-column label分类名称 propcate_name/el-table-columnel-table-column label分类别名 propcate_alias/el-table-columnel-table-column label操作 width100template #default{ row }el-button:iconEditcircleplaintypeprimaryclickonEditChannel(row)/el-buttonel-button:iconDeletecircleplaintypedangerclickonDelChannel(row)/el-button/template/el-table-columntemplate #emptyel-empty description没有数据 //template
/el-tableconst onEditChannel (row) {console.log(row)
}
const onDelChannel (row) {console.log(row)
}预览视图 el-table 表格 loading 效果
定义变量v-loading绑定
const loading ref(false)el-table v-loadingloading发送请求前开启请求结束关闭
const getChannelList async () {loading.value trueconst res await artGetChannelsService()channelList.value res.data.dataloading.value false
}ArticleChannel.vue
script setup
import { artGetChannelsService } from /api/article
import { Delete,Edit } from element-plus/icons-vueimport {ref} from vueconst channelList ref([]) // 文章分类列表
const loading ref(false) //加载状态
// 获取文章分类列表
const getChannelList async () {// 发请求之前先将loading设置为trueloading.value true// 调用接口const res await artGetChannelsService()channelList.value res.data.data// 发完请求关闭loadingloading.value false// console.log(文章分类列表,channelList.value);}// 调用获取文章分类列表
getChannelList()// 编辑文章分类
const onEditChannel (row,$index) {
console.log(row,$index)}// 删除文章分类
const onDelChannel (row,$index){console.log(row,$index)}
/scripttemplatediv!-- 按需引入 --page-container title文章分类 !-- 右侧按钮 - 添加文章 - 具名插槽 --template #extrael-button添加分类/el-button/template!-- 主体部分--表格 --el-table :datachannelList stylewidth: 100% v-loadingloadingel-table-column label序号 typeindex width100 /el-table-columnel-table-column label分类名称 propcate_name /el-table-columnel-table-column label分类别名 propcate_alias /el-table-columnel-table-column label操作 width100template #default{row,$index}el-button clickonEditChannel(row,$index) plain :iconEdit circle typeprimary /el-buttonel-button clickonDelChannel(row,$index) plain :iconDelete circle typedanger /el-button/template/el-table-column/el-table/page-container/div
/templatestyle langscss scoped
/style 请求到的数组为空时 channelList.value []添加element-plus插槽 !-- 主体部分--表格 --el-table :datachannelList stylewidth: 100% v-loadingloadingel-table-column label序号 typeindex width100 /el-table-columnel-table-column label分类名称 propcate_name /el-table-columnel-table-column label分类别名 propcate_alias /el-table-columnel-table-column label操作 width100template #default{row,$index}el-button clickonEditChannel(row,$index) plain :iconEdit circle typeprimary /el-buttonel-button clickonDelChannel(row,$index) plain :iconDelete circle typedanger /el-button/template/el-table-column!-- 没有数据 --template #emptyel-empty description暂无数据/el-empty/template/el-table下期见
