欢迎光临
我的个人博客网站

Vue cli + Element plus的查询和删除


编程工具

  1. SQL Server2019
  2. Visual Studio 2019
  3. Visual Studio Code

SQL Server数据

Vue cli + Element plus的查询和删除
注:这边我循环添加了几百条测试数据

Visual Studio 2019

我用vs2019 创建了一个web api的项目用来做数据传递

Vue cli + Element plus的查询和删除

Visual Studio Code

首先创建个vue cli项目

  1. 安装Element Puls包
npm install element-plus --save 
  1. 安装Axios包
npm install axios 

环境创建完成后进行配置

  1. 首先进入main.js,将这些加上
import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import locale from 'element-plus/lib/locale/lang/zh-cn'  createApp(App).use(router).use(ElementPlus,{locale}).mount('#app') 

注意 import locale from ‘element-plus/lib/locale/lang/zh-cn’ 这是解决之后用element plus分页组件显示英文的问题

  1. 进入views文件夹,创建一个PaperInquire.vue的文件
<template>   <div>     <el-table :data="papersData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" stripe border style="width: 100%">       <el-table-column prop="PaperID" label="编号"> </el-table-column>       <el-table-column prop="PaperName" label="试卷名"> </el-table-column>       <el-table-column prop="PaperExplain" label="试卷描述"> </el-table-column>       <el-table-column prop="PaperTime" label="考试时长"> </el-table-column>       <el-table-column label="操作">         <template #default="scope">           <el-button             type="danger"             size="small"             @click="findDelete(scope.$index, scope.row)">删除</el-button>         </template>       </el-table-column>     </el-table>     <div class="block">       <el-pagination         @size-change="handleSizeChange"         @current-change="handleCurrentChange"         :current-page="currentPage"         :page-size="pagesize"         layout="total,  prev, pager, next, jumper"         :total="papersData.length">       </el-pagination>     </div>   </div> </template>  <script> import axios from "axios";  export default {   name: "PaperInquire",   data() {     return {       papersData: [],       currentPage: 1, // 初始页       pagesize: 10, // 每页数据     };   },   methods: {     // 分页     handleSizeChange(val) {       this.pagesize = val;       console.log(`每页 ${val} 条`);     },     handleCurrentChange(val) {       this.currentPage = val;       console.log(`当前页: ${val}`);     },      // 查询     findAll() {       axios.get("http://localhost:8913/api/papers").then((res) => {         this.papersData = res.data;       });     },      // 删除     findDelete(index, row) {       this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {         confirmButtonText: "确定",         cancelButtonText: "取消",         type: "warning",       })         .then(() => {           axios             .delete("http://localhost:8913/api/papers/" + row.PaperID)             .then((res) => {               this.$message.success("删除成功!");               this.findAll();             })             .catch((res) => {               this.$message.console.error("删除失败!");             });         })         .catch(() => {           this.$message.info("已取消操作!");         });     },   },   created() {     this.findAll();   }, }; </script> 
  1. 进入router文件夹下的index.js,路由配置
{   path: '/PaperInquire',   name: 'PaperInquire',   component: () => import('../views/PaperInquire'), } 
  1. 进入App.vue
<template>   <div id="nav">     <router-link to="/">主页</router-link> |     <router-link to="PaperInquire">查询</router-link> |   </div>   <router-view/> </template> 
  1. 进入vs code控制台,跳转到项目文件夹下,输入下面的命令运行
npm run serve 
  1. 运行效果图如下
    运行后主页

Vue cli + Element plus的查询和删除
点击查询按钮跳转到此界面

Vue cli + Element plus的查询和删除
点击删除按钮,弹出确认提示框

Vue cli + Element plus的查询和删除
点击取消

Vue cli + Element plus的查询和删除
点击删除

Vue cli + Element plus的查询和删除

至此,一个vue cli+element plus 的基础用法就完成了,冲冲冲!!!
赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue cli + Element plus的查询和删除
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏