目标需求：

利用vue3+elementUI-plus实现

接口如下：

(^▽^)

具体实现

第一步：创建项目

第二步：装需要的包

cnpm i axios 
//我们需要用axios来请求数据

第三步：请求数据

3.1准备好API

import  axios  from "axios";
axios.defaults.baseURL = " http://121.43.116.41/demo/php/";
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";

//请求拦截
axios.interceptors.request.use(
  (config) => {
    // Do something before request is sent
    return config;
  },
  (error) => {
    // Do something with request error
    return Promise.reject(error);
  }
);

//响应拦截
axios.interceptors.response.use(
  (response) => {
    // Do something before response is sent
    return response.data;
  },
  (error) => {
    // Do something with response error
    return Promise.reject(error);
  }
);

export default axios;

API的写法相对固定

import axios from "../utils/request.ts"; // 引入axios 并使用定义好的配置（全局默认配置 请求拦截和响应拦截）

export const searchGradeOrderLimitAPI = (params:any) =>
  axios.get("/searchGradeOrderLimit.php", { params: params });
export const updateGradeByIdAPI = (data:any) =>
  axios.post("/updateGradeById.php", data);
export const deleteGradeByIdAPI = (params:any) =>
  axios.get("/deleteGradeById.php", { params: params });


export const addGradeAPI = (params: any) =>
  axios.get("/addGrade.php", { params: params });

3.2准备完成，获取数据

let searchParams = ref({
  wd: "",
  col: "id",
  type: "asc",
  page: 1,
  size: 10,
});



let searchGoodOrderLimit = () => {
  searchGradeOrderLimitAPI(searchParams.value)
    .then((res: any) => {
      console.log("请求成功38", res);

      list.value = res.list;
      
      //这里给每个数组项都增加了1个isEdit:false属性
      //为的是后续好写编辑按钮
      list.value.forEach((element: any) => {
        element.isEdit = false;
      });
      total.value = res.total;
      maxPage.value = res.maxPage;
      current.value = res.current;
      console.log("list", list);
    })
    .catch((err) => {
      console.log(err.message);
    });
};

3.3千辛万苦拿到数据，具体如下

第四步：渲染页面

//复制elementUI的表格功能，即可快速渲染页面。
//重点就是：将上述的list数据注入，后面根据list内部的
//id,name,chinese等多种属性，开始渲染页面


<el-table :data="list" style="width: 100%">
    //基础渲染，很好看懂
      <el-table-column prop="id" label="id" width="80" />
      <el-table-column prop="name" label="Name" width="80" />
      <el-table-column prop="class" label="class" width="80" />
      
      
      
      //下面使用了插槽，稍微复杂，看不懂可以往下看
      <el-table-column prop="chinese" label="语文" width="80">
        <template v-slot="{ row }">
          <span v-if="row.isEdit == false">{{ row.chinese }}</span>
          <el-input v-else v-model.number="row.chinese"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="math" label="数学" width="80">
        <template v-slot="{ row }">
          <span v-if="row.isEdit == false">{{ row.math }}</span>
          <el-input v-else v-model.number="row.math"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="english" label="英语" width="80">
        <template v-slot="{ row }">
          <span v-if="row.isEdit == false">{{ row.english }}</span>
          <el-input v-else v-model.number="row.english"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="" label="总分" width="80">
        <template v-slot="{ row }">
          {{ row.chinese + row.math + row.english }}
        </template>
      </el-table-column>
      <el-table-column prop="class" label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" @click="editHandler(row)">{{
            row.isEdit ? "保存" : "编辑"
          }}</el-button>
          <el-button type="success" @click="deleteHandler(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

渲染成果如下

第⑤步：新增功能

利用element设置按钮和弹出层

<el-button text @click="dialogVisible = true"> 新增 </el-button>

<el-dialog v-model="dialogVisible" title="新增成绩" width="30%">
      <el-form ref="ruleFormRef">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addStu.name"></el-input>
        </el-form-item>

        <el-form-item label="语文" prop="chinese">
          <el-input v-model.number="addStu.ch"></el-input>
        </el-form-item>
        <el-form-item label="数学" prop="math">
          <el-input v-model.number="addStu.mh"></el-input>
        </el-form-item>
        <el-form-item label="英语" prop="english">
          <el-input v-model.number="addStu.eh"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">Submit</el-button>
          <el-button @click="resetForm">Reset</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

弹出层的数据和我们的参数数组addStu双向绑定

let addStu = reactive({
  name: "",
  class: "2304",
  ch: null,
  mh: null,
  eh: null,
});

最后按钮的提交函数submitForm()负责调用接口即可（一定要按照接口要求传数据，不然可能会出现奇怪的错误）

第⑥步：编辑功能

6.1步骤一：点击按钮，编辑和保存互相切换

首先是按钮的网页结构
其实很简单，利用插槽基本写法以及
我们上面添加的isEdit，来决定显示内容
 <el-table-column prop="class" label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" @click="editHandler(row)">{{
            row.isEdit ? "保存" : "编辑"
          }}</el-button>
          <el-button type="success" @click="deleteHandler(row)">删除</el-button>
        </template>
      </el-table-column>
      
      
      
//其次，我们的语数外的页面结构，也应该用插槽&v-if/v-else来处理
如果if条件符合，那么就默认显示span
如果不符合，就显示v-else的input框，供我们修改

 <el-table-column prop="math" label="数学" width="80">
        <template v-slot="{ row }">
          <span v-if="row.isEdit == false">{{ row.math }}</span>
          <el-input v-else v-model.number="row.math"></el-input>
        </template>
  </el-table-column>

6.2步骤二：点击事件保存写好的数据

//isEdit默认为false
//当你点击按钮的时候,如果isEdit是true,我们就认为需要保存数据
//调用接口保存数据
//最后记得每次都要切换isEdit的值

let editHandler = (row: any) => {
  console.log(row.id);

  if (row.isEdit) {
    updateGradeByIdAPI({
      id: row.id,
      ch: row.chinese,
      mh: row.math,
      eh: row.english,
    }).then((res) => {
      console.log(res);
    });
  }
  row.isEdit = !row.isEdit;
};