阅读模式:

Vue cli + Element plus的查询和删除

阅读量:11  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:编程工具SQL Server2019Visual Studio 2019Visual Studio CodeSQL Server数据注:这边我循环添加了几百条测试数据Visual Studio 2019我用vs2019 创建了一个web a......

Vue cli + Element plus的查询和删除

编程工具

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

SQL Server数据


注:这边我循环添加了几百条测试数据

Visual Studio 2019

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

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 的基础用法就完成了,冲冲冲!!!
分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: