vue学习9

1.文章分类页面-element-plus表格

1. 基本架子-PageContainer封装
   按需引入的彩蛋，components里面的内容都会自动注册
   用el-card组件，里面使用插槽或具名插槽
   
2. 文章分类渲染 & 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>

3. 文章分类添加编辑【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 进阶

1. 文章列表渲染（带搜索&带分页）
   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"

2. 添加文章（抽屉&文件上传&富文本）
   抽屉：

<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. 删除文章