ASP.NET Core列表增删改查

前置要求:

1. vue+element-plus实现前端静态页面

HelloWorld.vue

<template><h2>hello界面</h2><div class="tableList"><!-- 搜索框 --><el-row :gutter="20"><el-col :span="8"><!-- 搜索与添加区域 --><el-input placeholder="请输入内容"v-model="SearchVal" clearable @clear="getUserList" @keyup.enter="enterSearch"><template #append><el-button @click="getUserList"><el-icon><search /></el-icon></el-button></template></el-input></el-col><el-col :span="2"><el-button type="primary" @click="openAdd">add</el-button></el-col><el-col :span="4"><el-button type="danger" @click="onDel">delete</el-button></el-col></el-row><!-- 表单 --><el-table :data="tableData" style="width: 100%"><el-table-column type="selection" width="55" /><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="100" /><el-table-column prop="oder" label="Oder" width="100" /><el-table-column prop="address" label="Address" /><!-- 操作按钮 --><el-table-column label="Operations"><template #default="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button><el-buttonsize="small"type="danger"@click="handleDelete(scope.$index, scope.row)">Delete</el-button></template></el-table-column></el-table><el-pagination background layout="prev, pager, next" :total="total"  @current-change="handleCurrentChange"/></div>
</template><script lang="ts" setup >
import { ref } from "vue";
const SearchVal=ref("")
const total=ref(100)
const enterSearch=()=>{}
const openAdd=()=>{}
const onDel=()=>{}const handleEdit = (index: number, row: User) => {console.log(index, row)
}
const handleDelete = (index: number, row: User) => {console.log(index, row)
}const handleCurrentChange = (val: number) => {console.log(val)
}const tableData = [{date: '2016-05-03',name: 'Tom',oder:1,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',oder:2,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',oder:3,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',oder:4,address: 'No. 189, Grove St, Los Angeles',},
]
</script><style lang="scss" scoped >
.tableList{margin:  0 500px;
}
.el-pagination{margin-top: 20px;
}
</style>

1.2 创建弹框组件app.vue

<!-- 弹窗组件 -->
<template><el-dialog v-model="dialogFormVisible" title="新增" with="30%"><el-form :model="form"><el-form-item label="时间" prop="date"><el-input v-model="form.data" type="date" placeholder="请选择一个时间" :disabledDate="disabledDate"/></el-form-item><el-form-item label="名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="form.address"/></el-form-item><el-form-item label="排序" prop="order"><el-input v-model="form.oder"/></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogFormVisible = false">Cancel</el-button><el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button></span></template></el-dialog>
</template>
<script setup lang="ts">
import {ref} from "vue"const dialogFormVisible=ref(false)
const form=ref()
const disabledDate=(time:any)=>{//最大时间从今天开始const _maxTime=Date.now()-24*60*60*1000*1return time.getTime()<=_maxTime
}</script><style scoped lang="scss">
.dialog-footer button:first-child {margin-right: 10px;
}
.el-button--text {margin-right: 15px;
}
.el-select {width: 300px;
}
.el-input {width: 300px;
}
.dialog-footer button:first-child {margin-right: 10px;
}
</style>

完善方法组件的代码:组件的引用,组件的传值prop,计算属性,事件监听、子触发父组件的事件

HelloWorld.vue

<template><h2>hello界面</h2><div class="tableList"><!-- 搜索框 --><el-row :gutter="20"><el-col :span="8"><!-- 搜索与添加区域 --><el-input placeholder="请输入内容"v-model="SearchVal" clearable @clear="getUserList" @keyup.enter="enterSearch"><template #append><el-button @click="getUserList"><el-icon><search /></el-icon></el-button></template></el-input></el-col><el-col :span="2"><el-button type="primary" @click="openAdd">add</el-button></el-col><el-col :span="4"><el-button type="danger" @click="onDel">delete</el-button></el-col></el-row><!-- 表单 --><el-table :data="tableData" style="width: 100%"><el-table-column type="selection" width="55" /><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="100" /><el-table-column prop="order" label="Order" width="100" /><el-table-column prop="address" label="Address" /><!-- 操作按钮 --><el-table-column label="Operations"><template #default="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button><el-buttonsize="small"type="danger"@click="handleDelete(scope.$index, scope.row)">Delete</el-button></template></el-table-column></el-table><el-pagination background layout="prev, pager, next" :total="total"  @current-change="handleCurrentChange"/></div><addVue :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></addVue>
</template><script lang="ts" setup >
import { ref } from "vue";
import User from "../class/User.ts"
import addVue from "../components/add.vue"
const SearchVal=ref("")
const total=ref(100)const isShow=ref(false)
//定义info
const info=ref<User>(new User())const enterSearch=()=>{}
const openAdd=()=>{isShow.value=true
}
const onDel=()=>{}const handleEdit = (index: number, row: User) => {console.log(index, row)info.value=rowisShow.value=true
}
const handleDelete = (index: number, row: User) => {console.log(index, row)
}const handleCurrentChange = (val: number) => {console.log(val)
}
const closeAdd=()=>{isShow.value=falseinfo.value=new User()
}
const success=()=>{isShow.value=falseinfo.value=new User()EIMessage.success(message)
}const tableData = [{date: '2016-05-03',name: 'Tom',order:1,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',order:2,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',order:3,address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',order:4,address: 'No. 189, Grove St, Los Angeles',},
]
</script><style lang="scss" scoped >
.tableList{margin:  0 500px;
}
.el-pagination{margin-top: 20px;
}
</style>

app.vue

作用:利用三元表达式,使用同一个组件展示不同的弹框内容

<!-- 弹窗组件 -->
<template><el-dialog v-model="dialogFormVisible" :title="info?.name?'修改':'新增'" with="30%" @close="$emit('closeAdd')" draggable="true"><!-- 使用三元表达式控制标题展示 --><el-form :model="form"><el-form-item label="时间" prop="date"><el-input v-model="form.date" type="date" placeholder="请选择一个时间" :disabledDate="disabledDate"/></el-form-item><el-form-item label="名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="form.address"/></el-form-item><el-form-item label="排序" prop="order"><el-input v-model="form.order"/></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="closeAdd()">取消</el-button><el-button type="primary" @click="save()">确认</el-button></span></template></el-dialog>
</template>
<script setup lang="ts">
import {ref,Ref,computed,watch} from "vue"
import User from "../class/User"
const prop=defineProps({//内置的传参工具  接收使用prop传递过来的数据isShow:Boolean,//对于接收的类型进行控制info:User
})const disabledDate=(time:any)=>{//最大时间从今天开始const _maxTime=Date.now()-24*60*60*1000*1return time.getTime()<=_maxTime
}
const dialogFormVisible=computed(()=>prop.isShow)//表单的展示与隐藏绑定在isShow上
const form:Ref<User>=ref<User>({//声明使用User类id:"",date:"",name:"",address:"",order:0
})
watch(()=>prop.info,(newInfo)=>{if(newInfo){form.value={id:newInfo.id,date:newInfo.date,name:newInfo.name,address:newInfo.address,order:newInfo.order }}
})
const emits=defineEmits(["closeAdd","success"])
const closeAdd=()=>{emits("closeAdd")
}
const save=()=>{emits("success")
}</script><style scoped lang="scss">
.dialog-footer button:first-child {margin-right: 10px;
}
.el-button--text {margin-right: 15px;
}
.el-select {width: 300px;
}
.el-input {width: 300px;
}
.dialog-footer button:first-child {margin-right: 10px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/239190.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

科研绘图(八)线性热图

线性热图&#xff08;Linear Heat Map&#xff09;是一种数据可视化技术&#xff0c;用于展示数值在一维线性空间上的分布情况。它通常用于展示沿着一条线&#xff08;例如时间线或任何一维序列&#xff09;的数据密度或强度变化。线性热图与传统的二维热图不同&#xff0c;后者…

day2·算法-快乐数-有效三角形个数

今天又来更新啦&#xff0c;准备蓝桥杯的小伙伴可以和我一起来刷题&#xff0c;建议大家先看题&#xff0c;整理出思路&#xff0c;再看如何用简单的写法将思路构建出来&#xff0c;然后优化细节&#xff0c;找到解决某些例外出现的方法&#xff0c;从而成功解答这道题。 快乐…

adb wifi 远程调试 安卓手机 命令

使用adb wifi 模式调试需要满足以下前提条件&#xff1a; 手机 和 PC 需要在同一局域网下。手机需要开启开发者模式&#xff0c;然后打开 USB 调试模式。 具体操作步骤如下&#xff1a; 将安卓手机通过 USB 线连接到 PC。&#xff08;连接的时候&#xff0c;会弹出请求&#x…

深入探索CSS动画的魅力-附带动画实例

一、网页动画发展简史 GIF动画 GIF全称为“Graphics Interchange Format”&#xff0c;是一种基于LZW算法的连续色调无损压缩格式。 由于其文件小、无损压缩、易于播放等优点&#xff0c;GIF成为了网页动画的最初选择。然而&#xff0c;GIF动画的色彩数量和帧数有限&#xff…

Python数据分析案例32——财经新闻爬虫和可视化分析

案例背景 很多同学的课程作业都是需要自己爬虫数据然后进行分析&#xff0c;这里提供一个财经新闻的爬虫案例供学习。本案例的全部数据和代码获取可以参考&#xff1a;财经新闻数据 数据来源 新浪财经的新闻网&#xff0c;说实话&#xff0c;他这个网站做成这样就是用来爬虫的…

k8s集群配置NodeLocal DNSCache

一、简介 当集群规模较大时&#xff0c;运行的服务非常多&#xff0c;服务之间的频繁进行大量域名解析&#xff0c;CoreDNS将会承受更大的压力&#xff0c;可能会导致如下影响&#xff1a; 延迟增加&#xff1a;有限的coredns服务在解析大量的域名时&#xff0c;会导致解析结果…

海外云手机助力企业拓展海外市场

在当前全球化的商业环境中&#xff0c;由于政策限制&#xff0c;许多企业面临着无法顺利将产品推广到国外的困境&#xff0c;使得海外市场的机遇白白流失。而随着科技的不断创新&#xff0c;一种解决企业海外拓展困境的工具应运而生&#xff0c;那就是海外云手机。本文将深入探…

【python】搭配Miniconda使用VSCode

现在的spyder总是运行出错&#xff0c;启动不了&#xff0c;尝试使用VSCode。 一、在VSCode中使用Miniconda管理的Python环境&#xff0c;可以按照以下步骤进行&#xff1a; a. 确保Miniconda环境已经安装并且正确配置。 b. 打开VSCode&#xff0c;安装Python扩展。 打开VS…

仅用三张图片实现任意场景三维重建:ReconFusion

论文题目&#xff1a; ReconFusion: 3D Reconstruction with Diffusion Priors 论文作者&#xff1a; Rundi Wu, Ben Mildenhall, Philipp Henzler, Keunhong Park, Ruiqi Gao, Daniel Watson, Pratul P. Srinivasan, Dor Verbin, Jonathan T. Barron, Ben Poole, Aleksande…

【huggingface】【pytorch-image-models】timm框架中使用albumentations库数据增广

文章目录 一、前言二、实操2.1 声明库2.2 定义你的数据增广算子2.3 加入其中 一、前言 问题是这样的&#xff0c;在使用timm框架训练时&#xff0c;发现数据增广不够&#xff0c;想用Albumentations库的数据增广&#xff0c;怎么把后者嵌入到前者的训练中。 其实也是比较简单…

Codeforces Round 919 (Div. 2) D题 偏移量,二分,子问题

Problem - D - Codeforces 题意&#xff1a; 用两种方式制作一个很大的数组&#xff0c;然后查询对应下标对应的数字。 难点&#xff1a; 制作的方式有复制n次原数组接到后面&#xff0c;样例的数据很大&#xff0c;很快就会溢出unsigned long long。暴力做出这个数组是不可…

第7章-第9节-Java中的Stream流(链式调用)

1、什么是Stream流 Lambda表达式&#xff0c;基于Lambda所带来的函数式编程&#xff0c;又引入了一个全新的Stream概念&#xff0c;用于解决集合类库既有的鼻端。 2、案例 假设现在有一个需求&#xff0c; 将list集合中姓张的元素过滤到一个新的集合中&#xff1b;然后将过滤…

【C++】Qt:Qt事件介绍与正弦曲线绘制示例

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Qt事件介绍与正弦曲线绘制示例。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更…

[软件工具][windows]yolov8自动标注工具自动打标签工具

软件截图如下&#xff1a; 这个工具可以自动将图片识别为指定类别并保存为VOC格式xml文件&#xff0c; 软件只支持官方80类别&#xff0c;您可以选择其中一部分或者一部分进行自动标注&#xff0c;标注的效果依据图片而定&#xff0c;通过自动标注您可以减少很多标注工作量&…

制造知识普及--MES系统中的调度排产管理

要想弄清楚MES系统调度排产的管理机制&#xff0c;则要首先搞清楚车间调度排产是一套怎样的工作流程&#xff0c;它的难点在什么地方&#xff1f; 生产调度指的是具体组织实现生产作业计划的工作&#xff0c;是对执行生产作业计划过程中发生的问题和可能出现的问题&#xff0c…

Unity 工具 之 Azure 微软连续语音识别ASR的简单整理

Unity 工具 之 Azure 微软连续语音识别ASR的简单整理 目录 Unity 工具 之 Azure 微软连续语音识别ASR的简单整理 一、简单介绍 二、实现原理 三、注意实现 四、实现步骤 五、关键脚本 一、简单介绍 Unity 工具类&#xff0c;自己整理的一些游戏开发可能用到的模块&#x…

重磅!ESI高被引论文阈值发布

1月11日&#xff0c;科睿唯安&#xff08;Clarivate Analytics&#xff09;公布了最新的ESI数据。 注&#xff1a;ESI的更新时间为每奇数月的第二个星期四。 Essential Science Indicators (ESI) 是一种分析工具&#xff0c;可帮助识别 Web of Science 核心合集中表现最好的研…

Lamp架构从入门到精通

系列文章目录 lnmp架构 lnmp架构-nginx负载均衡以及高可用 系列文章目录一、源码编译configure(检测预编译环境是否可行)makemake install优化关闭Debug 二、 nginx负载均衡三、nginx的高并发nginx work数量的设定nginx work进程与cpu的静态绑定压力测试nginx高并发修改操作系…

Unity使用Protobuf

1.下载Protobuf ProtoBuf 2.打开它并且编译 如果有报错下载相应的.net版本即可 这里默认是6.0.100 由于我本机是8.0.100所以我改了这个文件 3.编译后的文件复制到Unity Assets/Plugins下 4.写个测试的proto文件 5.然后使用protoc生成 这里实现了一个简单的bat批量生成 Protos C…

从0开始学Git指令(3)

从0开始学Git指令 因为网上的git文章优劣难评&#xff0c;大部分没有实操展示&#xff0c;所以打算自己从头整理一份完整的git实战教程&#xff0c;希望对大家能够起到帮助&#xff01; 远程仓库 Git是分布式版本控制系统&#xff0c;同一个Git仓库&#xff0c;可以分布到不…