通用后台管理系统前端界面Ⅹ——前端数据表格的删除、查找

删除操作

 1、拿到id或者行数据对象

2、查看后端接口方法，写api方法，将操作连接上后端

后端请求操作成功，但是前端数据表格未更新，最简单的一种方法数据删除后要重新获取数据===》 

 依旧显示成功，但是前端数据表格未变化，排查后，看封装请求方法的api.js文件，发现：1、方法没有获取参数；2、url有问题

错误的：                                                        正确的：

 查询操作  &   刷新（重置条件）操作

 1、找合适的组件

2、引入页面，按需修改，绑定点击事件使用

调整样式

 3、绑定输入框，获取输入框数据

4、查看后端接口，封装前端api接口。

查询之前做数据表格渲染的时候，已经封装过一次，但查的不是一个，而是全部数据，查看封装的查询api方法：

发先封装好的api接口，是有接收参数的，当调用时不传参，则默认查所有。

所以条件查询可以沿用之前的接口，直接调用，调用的时候传的参数是输入框对象。

而重置则是先将数据对象内容清空后，再查询即查所有。

删除前：删除后： 

 InfoList.vue

<template>
  <div class="InfoList">
    
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名">el-input>
      el-form-item>
      <el-form-item>
          <el-button type="primary" @click="find()">查询el-button>
      el-form-item>
      <el-form-item>
        <el-button type="danger" @click="refresh()">刷新el-button>
      el-form-item>
    el-form>
    
    <el-table
      :data="compData"
      height="450"
      border
      style="width: 100%"
      :default-sort="{ prop: 'number', order: 'Ascending' }"
    >
      
      <el-table-column type="selection" width="55"> el-table-column>
      <el-table-column prop="number" label="学号" align="center" sortable>
      el-table-column>
      <el-table-column prop="name" label="姓名" align="center">
      el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center">
      el-table-column>
      <el-table-column prop="age" label="年龄" align="center" sortable>
      el-table-column>
      <el-table-column prop="class" label="班级" align="center">
      el-table-column>
      <el-table-column prop="state_text" label="状态" align="center">
      el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center">
      el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="del(scope.row)"
            icon="el-icon-delete"
            type="danger"
            size="mini"
            circle
          >el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            circle
          >el-button>
        template>
      el-table-column>
    el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    el-pagination>
  div>
template>
 
<script>
import { Info, InfoDel } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数
      pageSize: 10, //每页显示条数
      total: 0,
      formInline: {
        name: ''
      }
    };
  },
  created() {
    this.getData();
  },
  computed: {
    compData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  methods: {
    find(){
      this.getData(this.formInline)
    },
    refresh(){
      this.formInline = {}
      this.getData(this.formInline)
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getData(params) {
      Info(params).then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.total = res.data.total;
          this.tableData = res.data.data;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.state === "1"
              ? (item.state_text = "已入校")
              : item.state === "2"
              ? (item.state_text = "未入校")
              : (item.state_text = "休学中");
          });
        }
      });
    },
    del(row) {
      console.log(row);
      InfoDel(row.id).then((res) => {
        if (res.data.status === 200) {
          this.$message({ message: res.data.message, type: "success" });
          this.getData();
        }
      });
    },
  },
};
script>
 
<style lang="scss">
.InfoList {
  .demo-form-inline {
    text-align: left;
  }
  .el-pagination {
    text-align: left;
    margin-top: 20x;
  }
}
style>

api.js 

//列表信息的删除接口
export function InfoDel(id){
    return service({
        method: 'delete',
        url: `/students/${id}`
    })
}