vue3.x+element-push实现简易的列表增删改功能
1,直接贴代码了 (有注释)
<template>
<div>
<el-button type="warning" @click="handleEdit(1)" style="margin-bottom:10px">添加</el-button>
<!-- 表格 -->
<el-table :data="tableData" border>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="type" label="状态">
<template #default="scope"> //vue3.x插槽最新写法
<span v-if="scope.row.type == 1">成功</span>
<span v-if="scope.row.type == 2">失败</span>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template #default="scope">
<el-button style="margin-right:10px;color:#67C23A" type="text" @click="handleEdit(0)">修改</el-button>
<el-popconfirm
confirmButtonText="好的"
cancelButtonText="不用了"
title="确定删除吗?"
@confirm="handleDeleteOne(scope.row.date,scope.$index)"
>
<template #reference>
<el-button type="text" style="color:#F56C6C">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
//分页组件
<div class="pagination">
<el-pagination background layout="prev, pager, next" :total="num"></el-pagination>
</div>
<!-- 添加+修改弹窗 -->
<el-dialog :title="type?'添加':'修改'" v-model="dialogVisible" width="30%">
//ref rules 表单验证
<el-form ref="addForm" :rules="rules" :model="addFormField" label-width="100px">
<el-form-item label="文件名称" prop="name">
<el-input v-model="addFormField.name" style="width:220px" placeholder="请输入文件名称"></el-input>
</el-form-item>
<el-form-item label="选择时期" prop="date">
<el-date-picker v-model="addFormField.date" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="选择状态" prop="status">
<el-select v-model="addFormField.status" placeholder="请选择状态">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="add">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { reactive, toRefs, onMounted, ref } from "vue"; //引入vue
import { ElMessage } from "element-plus"; //elementUI库
import axios from "@/utils/axios"; //axios请求地址
export default {
name: "list",
setup() {
//vue3.x获取ref
const addForm = ref(null);
//定义字段
const state = reactive({
dialogVisible: false,
num: 1,
type: "添加",
//列表模拟数据
tableData: [
{
date: "2020-04-01",
name: "张三",
address: "上海市普陀区金沙江路 1518 弄",
type: 1,
},
{
date: "2020-04-01",
name: "李四",
address: "上海市普陀区金沙江路",
type: 2,
},
],
//下拉模拟数据
options: [
{
value: "选项1",
label: "成功",
},
{
value: "选项2",
label: "失败",
},
],
//添加 -- 修改数据
addFormField: {
name: "",
date: "",
status: "",
},
//表单验证
rules: {
name: [
{ required: "true", message: "名称不能为空", trigger: ["change"] },
],
date: [
{ required: "true", message: "日期不能为空", trigger: ["change"] },
],
status: [
{ required: "true", message: "状态不能为空", trigger: ["change"] },
],
},
});
// 获取列表
const getShowList = () => {
state.loading = true;
//接口调用
axios
.post("/user/order/showList", {
params: {},
})
.then((res) => {
console.log(res);
// state.tableData = res.data
});
};
//添加修改弹出框
const handleEdit = (type) => {
if (type) state.type = true;
else state.type = false;
//显示弹窗
state.dialogVisible = true;
};
//点击确定
const add = () => {
//表单验证
addForm.value.validate((valid) => {
if (valid) {
//时间转换
let d = new Date(state.addFormField.date);
let time =
d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
state.addFormField.date = time;
//调用接口 处理逻辑
console.log(state.addFormField);
// 清空表单
addForm.value.resetFields();
} else return false;
});
};
//删除
const handleDeleteOne = (id) => {
//接口调用
axios
.post("/user/order/del", {
data: {
ids: [id],
},
})
.then(() => {
ElMessage.success("删除成功");
getShowList();
});
};
//页面挂载-生命周期
onMounted(() => {
// getShowList();
});
//将定义的数据全部返回给setup函数
return {
add,
addForm,
handleEdit,
handleDeleteOne,
...toRefs(state),
};
},
};
</script>
<style scoped>
/* 样式 */
.title {
font-size: 50px;
}
.pagination {
background: #fff;
padding: 10px;
display: flex;
justify-content: flex-end;
box-sizing: border-box;
}
</style>
希望此文章对你有帮助;