路由和布局
加一条路由规则：
const routes = [// 最大级别的规则，对应的组件，会显示在 App.vue 中// 登录{ path: '/login', component: () => import('@/views/Login.vue') },// 注册{ path: '/reg', component: () => import('@/views/Reg.vue') },// 后台主页{path: '/',component: () => import('@/views/Home.vue'),children: [{ path: 'home', component: () => import('@/views/Chart.vue') },{ path: 'user-info', component: () => import('@/views/user/UserInfo.vue') },{ path: 'user-pwd', component: () => import('@/views/user/RePwd.vue') },{ path: 'user-avatar', component: () => import('@/views/user/UserAvatar.vue') },+ { path: 'art-cate', component: () => import('@/views/article/CateList.vue') }]}]
页面布局：
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>类别列表</span>
<el-button type="primary">添加分类</el-button>
</div>
<!-- 内容区，放表格 -->
<el-table :data="tableData" style="width: 100%" stripe border>
<el-table-column prop="date" label="ID" 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>
</el-card>
</template>
<script>
export default {}
</script>
<style>
.clearfix {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
研究表格
中的 stripe表示斑马纹效果（隔行换色） 中的 border表示边框 表示表格展示的数据项是 list 表示表格中的一列 表示这一列，展示的是 id label表示这一列的表头 - 如果几列没有给宽度，则平分剩余宽度
```vue
类别列表
添加分类
<a name="jyT0P"></a>
## 获取接口数据
封装API方法（api/category.js）：
```javascript
import request from '@/utils/request'
// 封装获取分类的请求
export const getCategoryAPI = () => {
return request.get('/my/cate/list')
}
组件中，调用API，获取接口数据，将数据赋值给 数据项 list，数据修改，页面会自动更新：
import { getCategoryAPI } from '@/api/category'
export default {
data() {
return {
// 数据先留空，等ajax请求完成，获取列表数据之后，给list赋值
list: []
}
},
methods: {
async getCategory() {
// 调用API方法，获取接口数据，将得到的数据赋值给 数据项 list
const { data: res } = await getCategoryAPI()
if (res.code === 0) {
this.list = res.data
}
}
},
created() {
this.getCategory()
}
}
显示添加分类的对话框
我们使用的是 dialog 对话框：https://element.eleme.cn/#/zh-CN/component/dialog
这个对话框是通过一个数据项控制的，数据项=true则显示对话框；数据项为false则隐藏对话框。
先设置好控制对话框的数据项：
data() {
return {
// 数据先留空，等ajax请求完成，获取列表数据之后，给list赋值
list: [],
+ // 控制添加弹框的数据项
+ addDialog: false // false表示隐藏对话框；true表示显示对话框
}
}
去上述网站，找到自定义对话框，找到嵌套表单的对话框，复制里面的 表单位置的
复制到组件之后，把数据相关的都去掉，完整的代码如下：
（
<!-- 添加的对话框 -->
<el-dialog title="收货地址" :visible.sync="addDialog" width="500px">
<el-form label-width="80px">
<el-form-item label="分类名称">
<el-input autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="分别别名">
<el-input autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button>取 消</el-button>
<el-button type="primary">确 定</el-button>
</div>
</el-dialog>
点击 添加分类 按钮的时候，让 addDialog 数据项为true，显示对话框
<el-button type="primary" @click="addDialog = true">添加分类</el-button>
表单验证
数据部分：
data() {
return {
// 数据先留空，等ajax请求完成，获取列表数据之后，给list赋值
list: [],
// 控制添加弹框的数据项
addDialog: false, // false表示隐藏对话框；true表示显示对话框
// 收集添加表单的数据
addData: {
cate_name: '',
cate_alias: ''
},
// 验证的对象
rules: {
cate_name: [
{ required: true, message: '分类名称必填', trigger: 'blur' },
{ min: 1, max: 10, message: '长度1~10位', trigger: 'blur' }
],
cate_alias: [
{ required: true, message: '分类别名必填', trigger: 'blur' },
// {1,15} 不能写成 {1, 15}
{
pattern: /^[a-zA-Z0-9]{1,15}$/,
message: '只能是长度1~15位的字母数字组合',
trigger: 'blur'
}
]
}
}
}
页面绑定：
<el-form label-width="80px" :model="addData" :rules="rules">
<el-form-item label="分类名称" prop="cate_name">
<el-input v-model="addData.cate_name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="分别别名" prop="cate_alias">
<el-input v-model="addData.cate_alias" autocomplete="off"></el-input>
</el-form-item>
</el-form>
完成添加
封装API方法：
// 封装添加分类的请求
export const addCategoryAPI = data => {
return request.post('/my/cate/add', data)
}
组件中，导入API：
import { getCategoryAPI, addCategoryAPI } from '@/api/category'
给确认按钮，添加单击事件：
<el-button type="primary" @click="addCategory">确 定</el-button>
补充添加的方法：
// 添加分类的方法
addCategory() {
this.$refs.addForm.validate(async valid => {
if (!valid) return
const { data: res } = await addCategoryAPI(this.addData)
if (res.code === 0) {
this.$message.success(res.message) // 提示
this.$refs.addForm.resetFields() // 重置表单
this.addDialog = false // 关闭弹框
this.getCategory() // 重新获取分类列表数据
} else {
this.$message.error(res.message)
}
})
}
取消添加
取消添加，要重置表单，关闭对话框，所以新增一个方法 (放到 methods里面)：
// 取消添加的方法
cancel() {
this.$refs.addForm.resetFields() // 重置表单
this.addDialog = false // 关闭弹框
}
点击取消的时候，调用方法：
<el-button @click="cancel">取 消</el-button>
点击对话框的关闭按钮的时候，也调用这个方法 (加 :before-close="cancel")：
<el-dialog :before-close="cancel" title="收货地址" :visible.sync="addDialog" width="500px">
删除传递id
参考element-ui中，表格的使用，在做删除、编辑等操作的时候，使用作用域插槽：
v-slot=”obj” 表示这是一个作用域插槽，obj.row 就是当前这行数据的信息
<el-table-column label="操作"> <template v-slot="obj"> <el-button size="mini">编辑</el-button> <el-button size="mini" type="danger" @click="del(obj.row.id)">删除</el-button> </template> </el-table-column>下面设置好del方法，接收 id 值。
del(id) { console.log(id) }删除的提示框
del(id) { this.$confirm('确定不要我了吗？', '提示', { type: 'warning', callback: async r => { // console.log(r) // r 的值可能是 confirm、cancel、close if (r === 'confirm') { // 说明用户点击了确定，这个时候可以调用 API方法进行删除了 console.log(id) } } }) }完成删除
封装API方法 (api/category.js)：
// 删除分类的请求 export const deleteCategoryAPI = id => { return request({ method: 'DELETE', url: '/my/cate/del', params: { id } // 请求参数、查询参数写这个 // data: {} // 请求体，写这个 }) /** * request.get(url, 配置对象) * request.delete(url, 配置对象) * * request.post(url, 请求体, 配置对象) * request.put(url, 请求体, 配置对象) * request.patch(url, 请求体, 配置对象) */ // return request.delete('/my/cate/del', { // params: { id } // }) }组件中，导入API方法：
import { getCategoryAPI, addCategoryAPI, deleteCategoryAPI } from '@/api/category'调用API方法，完成删除：
// 删除的方法 del(id) { this.$confirm('确定不要我了吗？', '提示', { type: 'warning', callback: async r => { // console.log(r) // r 的值可能是 confirm、cancel、close if (r === 'confirm') { // 说明用户点击了确定，这个时候可以调用 API方法进行删除了 const { data: res } = await deleteCategoryAPI(id) if (res.code === 0) { this.$message.success(res.message) this.getCategory() // 调用获取分类的方法，重新获取数据，重新渲染到页面 } else { this.$message.error(res.message) } } } }) }编辑-显示编辑对话框
复制一个编辑的对话框，复制添加的对话框，修改对应的数据项：
控制弹框显示隐藏的数据项，改名为 editDialog
- 去掉
的 :bofore-close 属性 - 表单的数据绑定、验证绑定都去掉
- 输入框的 v-model 也去掉
- 取消、确定按钮的单击事件也去掉
声明，控制编辑弹框的数据项：editDialog: false
点击编辑按钮的时候，调用一个方法，并传递当前这条数据：
<el-button size="mini" @click="showEditDialog(obj.row)">编辑</el-button>
补充完成 显示对话框的方法：
// 显示编辑对话框的方法
showEditDialog(row) {
// console.log(row) // row 就是正在编辑的这条数据
this.editData = { ...row }
this.editDialog = true // 显示对话框
}
下面补充 editData 这个数据项：editData: {}
最后，输入框和数据项进行双向绑定：
<el-form-item label="分类名称" prop="cate_name">
<el-input v-model="editData.cate_name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="分别别名" prop="cate_alias">
<el-input v-model="editData.cate_alias" autocomplete="off"></el-input>
</el-form-item>
编辑-完成最终的更新
封装API方法：
export const updateCategoryAPI = data => {
// return request.put('/my/cate/info', data)
return request({
method: 'PUT',
url: '/my/cate/info',
data: data
})
}
组件中，导入 API 方法：
import {
getCategoryAPI,
addCategoryAPI,
deleteCategoryAPI,
updateCategoryAPI
} from '@/api/category'
找到 编辑表单 中的确定按钮，添加单击事件：@click="updateCategory"
最后的事件处理函数：
// 完成更新分类的方法
updateCategory() {
this.$refs.editForm.validate(async valid => {
if (!valid) return
const { data: res } = await updateCategoryAPI(this.editData)
if (res.code === 0) {
this.$message.success(res.message)
this.getCategory() // 重新获取数据，重新更新页面
this.editDialog = false // 关闭弹出层
} else {
this.$message.error(res.message)
}
})
}
若有收获，就点个赞吧
0 人点赞
