欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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 ......

编程工具

  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 的基础用法就完成了,冲冲冲!!!