Vue增删查改模板(表格,无分页)
<template>
<div class="loop-box">
<div class="loop-action-bar">
<el-button type="primary" plain @click="showAdd()">添加轮播图</el-button>
</div>
<div class="loop-list-box">
<el-table :data="bodyData" style="width: 100%" v-loading="loading">
<el-table-column prop="title" label="标题" width="120">
</el-table-column>
<el-table-column prop="imageUrl" label="图片路径" width="120">
</el-table-column>
<el-table-column label="state" width="120">
<template slot-scope="scope">
<div v-if="scope.row.state === '1'">
<el-tag type="success">正常</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="targetUrl" label="定向路径"> </el-table-column>
<el-table-column label="创建时间">
<!-- 插槽用法 -->
<template slot-scope="scope">
<span v-text="formatDate(scope.row.createTime)"></span>
</template>
</el-table-column>
<el-table-column label="更新时间">
<template slot-scope="scope">
<span v-text="formatDate(scope.row.updateTime)"></span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="showEdit(scope.row)"
>编辑</el-button
>
<el-button type="danger" size="mini" @click="deleteById(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div class="navigation-bar">
<!-- 分页部分 -->
</div>
<!-- 删除对话框 -->
<div class="loop-dialog-box">
<el-dialog
title="删除提示"
:visible.sync="dialogVisible_delete"
width="30%"
:before-close="handleClose"
>
<span>你确定要删除:{{ deleteMessage }}这个分类吗?</span>
<span slot="footer" class="dialog-footer">
<el-button
@click="dialogVisible_delete = false"
type="danger"
size="mini"
>取 消</el-button
>
<el-button type="primary" @click="doDeleteItem()" size="mini"
>确 定</el-button
>
</span>
</el-dialog>
</div>
<!-- 添加或更新的对话框 -->
<div class="loop-dialog-addOrUpdate-box">
<el-dialog
:title="editTitle"
:visible.sync="dialogVisible_addOrUpdate"
width="30%"
:before-close="handleClose"
>
<el-form
:label-position="labelPosition"
label-width="80px"
:model="dataForm"
>
<el-form-item label="名称">
<el-input v-model="dataForm.name"></el-input>
</el-form-item>
<el-form-item label="分类拼音">
<el-input v-model="dataForm.pinyin"></el-input>
</el-form-item>
<el-form-item label="分类描述">
<el-input
type="textarea"
resize="none"
:rows="2"
v-model="dataForm.description"
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="initForm()" type="danger">取 消</el-button>
<el-button type="primary" @click="doEdit()">{{
editorCommitText
}}</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import * as api from "@/api/axios";
import * as dateUtils from "@/utils/date";
export default {
//import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存数据
return {
bodyData: [
// {
// id: "1",
// imageUrl: "1",
// state: "1",
// targetUrl: "1",
// title: "1",
// state: "1",
// createTime: "2020",
// updateTime: "2020",
// },
],
dialogVisible_delete: false,
dialogVisible_addOrUpdate: false,
deleteMessage: "",
deleteTarget: "",
labelPosition: "right",
addOrEdit: "edit",
loading: true,
dataForm: {
id: "",
name: "",
pinyin: "",
description: "",
},
editorCommitText: "修改分类",
editTitle: "编辑分类",
};
},
//计算属性
computed: {},
//监控data中数据变化
watch: {},
//方法
methods: {
//日期转换
formatDate(dateStr) {
var date = new Date(dateStr);
return dateUtils.formatDate(date, "yyyy-MM-dd hh:mm:ss");
},
//确认关闭对话框
handleClose(done) {
this.$confirm("确认关闭?")
.then((_) => {
this.initForm();
done();
})
.catch((_) => {});
},
//初始化表单对象
initForm() {
//给表单对象 this.dataForm 初始化
this.dialogVisible_addOrUpdate = false;
},
//获取分类列表
getList() {
//去获取分类列表
//给 this.bodyData 赋值对象数据
this.loading = false;
},
//获取当前对象
getBodyData(categoryId) {
//防止多人同时修改,可以用mybatis-plus的version 乐观锁
//也就是获取当前对象 发送axios请求吧
this.dialogVisible_addOrUpdate = false;
},
//删除 ,打开删除窗口
deleteById(item) {
//打开删除窗口,
//进行数据的获取,获取当前对象和删除的对象的名称
//为了执行删除操作可以获取到id
this.dialogVisible_delete = true;
console.log(item);
},
//执行删除操作
doDeleteItem() {
//执行删除请求
//完了记得获取最新数据列表
this.getList();
this.dialogVisible_delete = false;
},
//打开编辑分类 的对话框
showEdit(item) {
(this.editorCommitText = "修改分类"),
(this.editTitle = "编辑分类"),
(this.addOrEdit = "edit");
//调用方法获取最新的数据
this.getBodyData(item.id);
this.dialogVisible_addOrUpdate = true;
// console.log(item);
},
//打开添加对话框
showAdd() {
(this.editorCommitText = "添加分类"),
(this.editTitle = "添加分类"),
(this.addOrEdit = "add");
//初始化表单对象
this.initForm();
this.dialogVisible_addOrUpdate = true;
},
//执行编辑或执行添加操作
doEdit() {
console.log("修改或添加分类");
if (this.addOrEdit === "edit") {
//执行修改
//完了记得获取最新数据列表
} else {
//先判断数据是否为空
//然后进行添加
//完了记得获取最新数据列表
}
this.dialogVisible_addOrUpdate = false;
},
},
//声明周期 - 创建完成(可以访问当前this实例)
created() {},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
this.getList();
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //声明周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁之后
activated() {}, //缓存keep-alive
};
</script>
<style scoped>
</style>
有分页(只有删除和搜索)
//用户列表
<template>
<div class="loop-box">
<div class="loop-action-bar">
<el-button type="warning" plain disabled>搜索用户</el-button>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="用户名">
<el-input
v-model="formInline.userName"
placeholder="请输入用户名"
></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input
v-model="formInline.email"
placeholder="请输入邮箱"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button @click="resetForm()">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="loop-list-box">
<el-table :data="bodyData" style="width: 100%" v-loading="loading">
<el-table-column prop="userName" label="用户名" width="120">
</el-table-column>
<el-table-column prop="roles" label="角色" width="120">
<template slot-scope="scope">
<div v-if="scope.row.roles === 'role_normal'">
<el-tag>普通用户</el-tag>
</div>
<div v-if="scope.row.roles === 'role_admin'">
<el-tag type="success">管理员</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="state" width="120">
<template slot-scope="scope">
<div v-if="scope.row.state === '1'">
<el-tag type="success">正常</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="头像">
<template slot-scope="scope">
<div class="block">
<el-avatar :size="50" :src="scope.row.avatar"> </el-avatar>
</div>
</template>
</el-table-column>
<el-table-column prop="email" label="邮箱地址"></el-table-column>
<el-table-column prop="sign" label="签名"></el-table-column>
<el-table-column label="创建时间">
<!-- 插槽用法 -->
<template slot-scope="scope">
<span v-text="formatDate(scope.row.createTime)"></span>
</template>
</el-table-column>
<el-table-column label="更新时间">
<template slot-scope="scope">
<span v-text="formatDate(scope.row.updateTime)"></span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="deleteById(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<el-row :gutter="20">
<el-col :span="8" :offset="8">
<div class="navigation-bar" style="padding-top: 40px">
<!-- 分页部分 -->
<el-pagination
background
layout="total, prev, pager, next, jumper"
:hide-on-single-page="true"
:page-size="PageformData.size"
:current-page="PageformData.current"
:total="PageformData.total"
@prev-click="prevPage"
@next-click="nextPage"
@current-change="currentPageChange"
>
</el-pagination>
</div>
</el-col>
</el-row>
<!-- 删除对话框 -->
<div class="loop-dialog-box">
<el-dialog
title="删除提示"
:visible.sync="dialogVisible_delete"
width="30%"
:before-close="handleClose"
>
<span>你确定要删除:{{ deleteMessage }}这个用户吗?</span>
<span slot="footer" class="dialog-footer">
<el-button
@click="dialogVisible_delete = false"
type="danger"
size="mini"
>取 消</el-button
>
<el-button type="primary" @click="doDeleteItem()" size="mini"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import * as api from "@/api/axios";
import * as dateUtils from "@/utils/date";
export default {
//import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存数据
return {
formInline: {
userName: "",
email: "",
},
bodyData: [],
dialogVisible_delete: false,
dialogVisible_addOrUpdate: false,
deleteMessage: "",
deleteTarget: "",
labelPosition: "right",
addOrEdit: "edit",
loading: true,
dataForm: {
id: "",
userName: "",
roles: "",
avatar: "",
email: "",
sign: "",
state: "",
},
PageformData: {
size: 5,
currentPage: 1,
total: 5,
},
editorCommitText: "修改对象",
editTitle: "编辑对象",
};
},
//计算属性
computed: {},
//监控data中数据变化
watch: {},
//方法
methods: {
//获取对象列表
getList(currentPage) {
//去获取对象列表
this.PageformData.currentPage =
currentPage === undefined ? this.PageformData.currentPage : currentPage;
//给 this.bodyData 赋值对象数据
api.getUserList(this.PageformData).then((resp) => {
// console.log(resp);
if (resp.code === api.success_code) {
this.bodyData = resp.data.records;
this.PageformData.size = resp.data.size;
this.PageformData.total = resp.data.total;
this.PageformData.currentPage = resp.data.current;
api.toast_succ(resp.message);
} else {
api.toast_err(resp.message);
}
});
this.loading = false;
},
//日期转换
formatDate(dateStr) {
var date = new Date(dateStr);
return dateUtils.formatDate(date, "yyyy-MM-dd hh:mm:ss");
},
//确认关闭对话框
handleClose(done) {
this.$confirm("确认关闭?")
.then((_) => {
done();
})
.catch((_) => {});
},
//删除 ,打开删除窗口
deleteById(item) {
//打开删除窗口,
//进行数据的获取,获取当前对象和删除的对象的名称
this.deleteMessage = item.userName;
this.deleteTarget = item;
//为了执行删除操作可以获取到id
this.dialogVisible_delete = true;
console.log(item);
},
//执行删除操作
doDeleteItem() {
//执行删除请求
api.deleteUser(this.deleteTarget.id).then((resp) => {
if (resp.code === api.success_code) {
api.toast_succ(resp.message);
//完了记得获取最新数据列表
this.getList();
} else {
api.toast_err(resp.message);
}
});
this.dialogVisible_delete = false;
},
//搜索
onSubmit() {
console.log("submit!");
api
.doUserSearch(this.formInline.userName, this.formInline.email)
.then((resp) => {
// console.log(resp);
if (resp.code === api.success_code) {
this.bodyData = resp.data.records;
this.PageformData.size = resp.data.size;
this.PageformData.total = resp.data.total;
this.PageformData.currentPage = resp.data.current;
api.toast_succ(resp.message);
} else {
api.toast_err(resp.message);
}
});
},
//上一页
prevPage() {
this.getList(this.PageformData.currentPage - 1);
},
//下一页
nextPage() {
this.getList(this.PageformData.currentPage + 1);
},
//重置搜索
resetForm(formName) {
console.log("重置");
this.formInline.userName = "";
this.formInline.email = "";
this.PageformData.size = 5;
this.getList(1);
},
//currentPage 改变时会触发
currentPageChange(page) {
this.getList(page);
},
},
//声明周期 - 创建完成(可以访问当前this实例)
created() {},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
this.getList(1);
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //声明周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁之后
activated() {}, //缓存keep-alive
};
</script>
<style scoped>
</style>
未填充内容的空模板
<template>
<div></div>
</template>
<script>
export default {
//import 引入的组件需要注入到对象中才能使用
components:{},
props:{},
data(){
//这里存数据
return{};
},
//计算属性
computed: {
},
//监控data中数据变化
watch: {
},
//方法
methods: {
},
//声明周期 - 创建完成(可以访问当前this实例)
created() {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
},
beforeCreate() {},//生命周期 - 创建之前
beforeMount() {},//生命周期 - 挂载之前
beforeUpdate() {},//声明周期 - 更新之前
updated() {},//生命周期 - 更新之后
beforeDestroy() {},//生命周期 - 销毁之前
destroyed() {},//生命周期 - 销毁之后
activated() {},//缓存keep-alive
}
</script>
<style scoped>
</style>
(后期会分享整个增删改查+搜索+分页模板)