Vue cli + Element plus的查询和删除
程序员文章站
2022-03-01 21:05:21
编程工具 SQL Server2019 Visual Studio 2019 Visual Studio Code SQL Server数据 注:这边我循环添加了几百条测试数据 Visual Studio 2019 我用vs2019 创建了一个web api的项目用来做数据传递 Visual Stu ......
编程工具
- sql server2019
- visual studio 2019
- visual studio code
sql server数据
注:这边我循环添加了几百条测试数据
visual studio 2019
我用vs2019 创建了一个web api的项目用来做数据传递
visual studio code
首先创建个vue cli项目
- 安装element puls包
npm install element-plus --save
- 安装axios包
npm install axios
环境创建完成后进行配置
- 首先进入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分页组件显示英文的问题
- 进入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>
- 进入router文件夹下的index.js,路由配置
{ path: '/paperinquire', name: 'paperinquire', component: () => import('../views/paperinquire'), }
- 进入app.vue
<template> <div id="nav"> <router-link to="/">主页</router-link> | <router-link to="paperinquire">查询</router-link> | </div> <router-view/> </template>
- 进入vs code控制台,跳转到项目文件夹下,输入下面的命令运行
npm run serve
- 运行效果图如下
运行后主页
点击查询按钮跳转到此界面
点击删除按钮,弹出确认提示框
点击取消
点击删除
至此,一个vue cli+element plus 的基础用法就完成了,冲冲冲!!!
上一篇: 华为watch3小艺怎么唤醒? 华为watch3呼叫小艺的技巧
下一篇: C#设计模式总纲