vue3实现单页crud
1.介绍
主要实现单页curd，包含分页、新增、修改、删除、批量删除、条件搜索、表单校验。导入和导出暂未实现。、
本文章只是学习过程。仅供参考。
2.代码，按需复制修改即可
<template>
<!-- 搜索栏 -->
<div style="margin: 10px 0">
<el-input v-model="name" style="width:300px;" placeholder="请输入名称" />
<el-input v-model="address" placeholder="请输入地址" style="width:300px;margin-left:10px;" />
<el-button type="primary" style="margin-left:5px;" @click="load">
<el-icon style="vertical-align: middle">
<Search />
</el-icon> <span style="vertical-align: middle"> 搜索 </span>
</el-button>
<el-button type="warning" style="margin-left:5px;" @click="reset">
<el-icon style="vertical-align: middle">
<RefreshLeft />
</el-icon> <span style="vertical-align: middle"> 重置 </span>
</el-button>
</div>
<!-- 新增栏菜单 -->
<div style="margin: 10px 0">
<el-button type="success" @click="handleAdd">
<el-icon style="vertical-align: middle">
<Plus />
</el-icon> <span style="vertical-align: middle"> 新增 </span>
</el-button>
<el-upload :show-file-list="false" style="display: inline-block; position: relative; top: 3px;margin-left:5px;"
:action='`http://127.0.0.1/user/import`' :on-success="handleImportSuccess"
:headers="{ Authorization: token }">
<el-button type="primary">
<el-icon style="vertical-align: middle">
<Bottom />
</el-icon> <span style="vertical-align: middle"> 导入 </span>
</el-button>
</el-upload>
<el-button type="primary" @click="exportData" style="margin-left:5px;">
<el-icon style="vertical-align: middle">
<Top />
</el-icon> <span style="vertical-align: middle"> 导出 </span>
</el-button>
<el-popconfirm title="您确定删除吗？" @confirm="confirmDelBatch">
<template #reference>
<el-button type="danger" style="margin-left: 5px">
<el-icon style="vertical-align: middle">
<Remove />
</el-icon> <span style="vertical-align: middle"> 批量删除 </span>
</el-button>
</template>
</el-popconfirm>
</div>
<!-- 表格栏 -->
<div style="margin: 10px 0">
<el-table :data="state.tableData" stripe border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="text" label="标题"></el-table-column>
<el-table-column prop="content" label="内容"></el-table-column>
<!-- <el-table-column prop="imgurl" label="图片"></el-table-column> -->
<el-table-column label="操作" width="180">
<template #default="scope">
<el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
<el-popconfirm title="您确定删除吗？" @confirm="del(scope.row.id)">
<template #reference>
<el-button type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div style="margin: 10px 0">
<el-pagination @current-change="load" @size-change="load" v-model:current-page="pageNum"
v-model:page-size="pageSize" background :page-sizes="[2, 5, 10, 20]"
layout="total, sizes, prev, pager, next, jumper" :total="total" />
</div>
<!-- 新增 -->
<el-dialog v-model="dialogFormVisible" title="新增用户信息" width="40%">
<el-form ref="ruleFormRef" :rules="rules" :model="state.form" label-width="80px" style="padding: 0 20px"
status-icon>
<!-- <el-form-item prop="id" label="ID">
<el-input v-model="state.form.id" autocomplete="off" />
</el-form-item> -->
<el-form-item prop="text" label="标题">
<el-input v-model="state.form.text" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="save">
保存
</el-button>
</span>
</template>
</el-dialog>
<!-- 新增end -->
<!-- 修改 -->
<el-dialog v-model="dialogFormVisibleUpdate" title="新增用户信息" width="40%">
<el-form ref="ruleFormRef" :rules="rules" :model="state.form" label-width="80px" style="padding: 0 20px"
status-icon>
<el-form-item prop="id" label="ID">
<el-input v-model="state.form.id" autocomplete="off" disable />
</el-form-item>
<el-form-item prop="text" label="标题">
<el-input v-model="state.form.text" autocomplete="off" />
</el-form-item>
<el-form-item prop="text" label="内容">
<el-input v-model="state.form.content" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisibleUpdate = false">取消</el-button>
<el-button type="primary" @click="saveUpdate">
保存
</el-button>
</span>
</template>
</el-dialog>
<!-- 修改end -->
</template>
<script setup>
import { nextTick, reactive, ref } from "vue";
// 引入通知
import { ElMessage } from "element-plus";
// import { findByPage } from "../../api/emo.js";
import request from "../../util/axios";
const name = ref('')
const address = ref('')
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 定义表格数据，请求后台方法
const state = reactive({
tableData: [],
form: {}
})
const load = () => {
request.post('/emo/page', {
name: name.value,
address: address.value,
currentPage: pageNum.value,
pageSize: pageSize.value
}).then(res => {
console.log(res)
state.tableData = res.page.list
total.value = res.page.totalCount
})
}
// 调用 load方法拿到后台数据
load()
// 重置搜索框方法
const reset = () => {
name.value = ''
address.value = ''
load()
}
// -------------------------------------------------------------------------------------------------------------------------------------------
// 控制新增弹框显示隐藏
const dialogFormVisible = ref(false)
// 新增方法
const handleAdd = () => {
dialogFormVisible.value = true
ruleFormRef.value.resetFields()
state.form = {}
}
// 添加效验规则
const rules = reactive({
id: [
{ required: true, message: '请输入id', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在3-20之间', trigger: 'blur' },
],
text: [
{ required: true, message: '请输入text', trigger: 'blur' },
],
})
const ruleFormRef = ref()
// 新增保存方法
const save = () => {
ruleFormRef.value.validate(valid => { // valid就是校验的结果
if (valid) {
request.post('/emo/add', state.form).then(res => {
console.log(res)
if (res.code === 200) {
ElMessage.success('保存成功')
dialogFormVisible.value = false
load() // 刷新表格数据
} else {
ElMessage.error(res.msg)
}
})
}
})
}
// -------------------------------------------------------------------------------------------------------------------------------------------
// 修改
const dialogFormVisibleUpdate = ref(false)
// 编辑触发方法
const handleEdit = (raw) => {
dialogFormVisibleUpdate.value = true
nextTick(() => {
ruleFormRef.value.resetFields()
state.form = JSON.parse(JSON.stringify(raw))
})
}
// 修改保存方法
const saveUpdate = () => {
// ruleFormRef.value.validate(valid => { // valid就是校验的结果
// if (valid) {
// }
// })
request.post('/emo/updateById', state.form).then(res => {
console.log(res)
if (res.code === 200) {
ElMessage.success('保存成功')
dialogFormVisibleUpdate.value = false
load() // 刷新表格数据
} else {
ElMessage.error(res.msg)
}
})
}
// -------------------------------------------------------------------------------------------------------------------------------------------
// 删除
const del = (id) => {
request.delete('/emo/del/' + id).then(res => {
if (res.code === 200) {
ElMessage.success('操作成功')
load() // 刷新表格数据
} else {
ElMessage.error(res.msg)
}
})
}
// -------------------------------------------------------------------------------------------------------------------------------------------
// 批量删除
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
multipleSelection.value = val
}
// 批量删除方法
const confirmDelBatch = () => {
if (!multipleSelection.value || !multipleSelection.value.length) {
ElMessage.warning("请选择数据")
return
}
const idArr = multipleSelection.value.map(v => v.id)
request.post('/user/del/batch', idArr).then(res => {
if (res.code === '200') {
ElMessage.success('操作成功')
load() // 刷新表格数据
} else {
ElMessage.error(res.msg)
}
})
}
// -------------------------------------------------------------------------------------------------------------------------------------------
// 导出接口
const exportData = () => {
// window.open(`http://${config.serverUrl}/user/export`)
window.open(`http://127.0.0.1/user/export`)
}
</script>
<style>
th {
background-color: aliceblue !important;
}
</style>
