黑马程序员_大事件项目笔记4_文章分类
文章分类页面-[element-plus 表格]
功能需求说明:
①基本架子-PageContainer封装
②文章分类渲染&loading处理
③文章分类添加编辑[element-plus弹层]
④文章分类删除
1.文章分类架子-PageContainer封装
在article文件夹中的ArticleChasnnel.vue文件中
Card 组件包括header和body部分,header部分需要有显式具名 slot 分发,同时也是可选的。
官网中的代码
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
</style>
参考官网中的代码,代码如下
<template>
<el-card class="page-container">
<template #header>
<div class="header">
<span>文章分类</span>
<div class="extra">
<el-button type="primary">添加分类</el-button>
</div>
</div>
</template>
<div>内容部分</div>
<div>内容部分</div>
<div>内容部分</div>
<div>内容部分</div>
<div>内容部分</div>
</el-card>
</template>
<style lang="scss" scoped>
.page-container {
min-height: 100%;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
代码运行结果
按照ArticleChannel
.vue文件在components文件夹中的PageCintainer.vue文件中写以下代码
<script setup>
defineProps({
title: {
required: true,
type: String
}
})
</script>
<template>
<el-card class="page-container">
<template #header>
<div class="header">
<span>{{ title }}</span>
<div class="extra">
<slot name="extra"></slot>
</div>
</div>
</template>
<slot></slot>
</el-card>
</template>
<style lang="scss" scoped>
.page-container {
min-height: 100%;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
在article文件夹中的ArticleChannel.vue文件
<template>
<page-container title="文章分类">
<template #extra>
<el-button>测试按钮</el-button>
</template>
主题部分,是表格
</page-container>
</template>
<style lang="scss" scoped></style>
article文件夹中的ArticleMange.vue文件中的代码
<template>
<page-container title="文章管理">
<template #extra>
<el-button>添加文章</el-button>
</template>
主体部分,是表格加分页
</page-container>
</template>
<style lang="scss" scoped></style>
2.文章分类渲染&loading处理
在api文件夹中新建立articles.js文件
import request from '@/utils/request'
//获取文章分类
export const artGetChannelsService = () => request.get('/my/cate/list')
在页面中调用接口,获取数据存储
在article文件夹中的ArticleChannel.vue文件中
<script setup>
import { ref } from 'vue'
import { artGetChannelsService } from '../../api/article'
const channelList = ref([])
const getChannelList = async () => {
const res = await artGetChannelsService()
channelList.value = res.data.data
console.log(channelList.value)
}
getChannelList()
</script>
<template>
<page-container title="文章分类">
<template #extra>
<el-button>添加分类</el-button>
</template>
主题部分,是表格
</page-container>
</template>
<style lang="scss" scoped></style>
官网上的Table表格以及其代码
当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
数组包对象的格式
article文件夹中的ArticleChannel.vue文件
<script setup>
import { ref } from 'vue'
import { artGetChannelsService } from '../../api/article'
const channelList = ref([])
const getChannelList = async () => {
const res = await artGetChannelsService()
channelList.value = res.data.data
console.log(channelList.value)
}
getChannelList()
const onEditChannel = (row, $index) => {
console.log(row, $index)
}
</script>
<template>
<page-container title="文章分类">
<template #extra>
<el-button>添加分类</el-button>
</template>
<el-table :data="channelList" style="width: 100%">
<el-table-column type="index" label="序号"> width="100"</el-table-column>
<el-table-column prop="cate_name" label="分类名称"></el-table-column>
<el-table-column prop="cate_alias" labe="分类别名"></el-table-column>
<el-table-column label="操作" width="100">
<!-- row就是channelList的一项,$index 下标 -->
<template #default="{ row, $index }">
<el-button @click="onEditChannel(row, $index)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</page-container>
</template>
<style lang="scss" scoped></style>
官网中button的部分代码
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
需要导入
import { Edit, Delete } from ‘@element-plus/icons-vue’
官网上的加载特效的部分
<template>
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<style>
body {
margin: 0;
}
</style>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
loading: true
};
}
};
</script>
空状态
<el-empty description="描述文字"></el-empty>
在article文件夹中的ArticleChannel.vue文件中的所有代码
<script setup>
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { artGetChannelsService } from '../../api/article'
const channelList = ref([])
const loading = ref(false)
const getChannelList = async () => {
loading.value = true
const res = await artGetChannelsService()
channelList.value = res.data.data
channelList.value = []
console.log(channelList.value)
}
getChannelList()
const onEditChannel = (row, $index) => {
console.log(row, $index)
}
const onDelChannel = (row, $index) => {
console.log(row, $index)
}
</script>
<template>
<page-container title="文章分类">
<template #extra>
<el-button>添加分类</el-button>
</template>
<el-table v-loading="loading" :data="channelList" style="width: 100%">
<el-table-column type="index" label="序号"> width="100"</el-table-column>
<el-table-column prop="cate_name" label="分类名称"></el-table-column>
<el-table-column prop="cate_alias" labe="分类别名"></el-table-column>
<el-table-column label="操作" width="150">
<!-- row就是channelList的一项,$index 下标 -->
<template #default="{ row, $index }">
<el-button
:icon="Edit"
circle
plain
type="primary"
@click="onEditChannel(row, $index)"
></el-button>
<el-button
:icon="Delete"
circle
plain
type="danger"
@click="onDelChannel(row, $index)"
></el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="没有数据"></el-empty>
</template>
</el-table>
</page-container>
</template>
<style lang="scss" scoped></style>