vue学习9
1.文章分类页面-element-plus表格
- 基本架子-PageContainer封装
按需引入的彩蛋，components里面的内容都会自动注册
用el-card组件，里面使用插槽或具名插槽
- 文章分类渲染 & loading处理
序号：
<el-table-column type="index" width="50" />
loading效果：
const getChannelList = async () => {loading.value = trueconst res = await artGetChannelsService()channelList.value = res.data.dataloading.value = false
}
空内容：
<template #empty><el-empty description="没有数据" />
</template>
- 文章分类添加编辑【element-plus弹层】
<el-form
:model="formModel"
:rules="rules"
label-width="100px"
style="padding-right: 30px"
><el-form-item label="分类名称" prop="cata_name"><el-input v-model="formModel.cata_name"placeholder="请输入分类名称"></el-form-item><el-form-item label="分类别名" prop="cata_alias"><el-input v-model="formModel.cata_alias"placeholder="请输入分类别名"></el-form-item>
</el-form>
4. 添加文章分类
接口文档：
export const artAddChannelService = (data) => request.post(`/my/cata/add`, data)
编辑文档：
export const artEditChannelService = (data) => request.put(`/my/cata/info`, data)
5. 文章分类删除
请求参数：query
删除文章分类
export const artDelChannelService = (id) => request.delete(`/my/cata/del`, {params: {id}
})
2.文章管理页面-element-plus 进阶
- 文章列表渲染（带搜索&带分页）
label是给用户看的，value是收集给后台的
在form里面配置inline属性，搜索框就能在一行显示了
利用prop配置
利用作用域插槽row，可以获取当前行的数据 => v-for遍历item
获取文章列表
export const artGetListService = (params) =>request.get('/my/artticle/list', {params})
必须是大写字母，且字母不能改，必须是YYYY年MM月DD日
export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')
最后再导入使用：
分页渲染
//处理分页逻辑
const onSize = (size) => {//只要是每页条数变化了那么原本正在访问的当页意义不大了//重新从 第一页渲染params.value.pagenum = 1params.value.pagesize = sizegetArticleList()
}
loading效果
:v-loading="loading"
- 添加文章（抽屉&文件上传&富文本）
抽屉：
<el-drawer
v-model="visibleDrawer"
title="大标题"
direction="rt1"
size="50%"
>
</el-drawer>
(1)open{{}},添加操作，添加表单初始化无数据
(2)open{{ id:xx,…}},编辑操作，编辑表单初始化需回显
准备数据，方法，form表单结构，重置添加，下拉菜单
on-change 钩子 ：添加文件，上传成功和失败都会调用
富文本编辑器
<quill-editor theme="anow" v-model:content="formModel.content"></quill-editor>
添加和编辑是不一样的
父组件监听事件，重新渲染
//添加修改成功
const onSuccess = (type) => {if(type ==='add') {//如果是添加，需要跳转渲染最后一页，编辑直接渲染当前页const lastPage = Math.ceil((total.value + 1)/params.value.pagesize)params.value.pagenum = lastPage}
}
添加完成后的内容重置
3. 编辑文章（共用抽屉）
编辑文章的回显
imgUrl.value = baseURL + formModel.value.cover_img
//提交到后台，需要的是filez格式，将网络图片，转成format格式
//网络图片转成File对象，要转换
formModel.value.cover_img = await imageUrlToFile(imgUrl.value,formModel.value)else{console.log(''添加功能")
}
封装接口，用id获取数据详情->页面中调用渲染
4. 删除文章