|
目标需求：
利用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等多种属性，开始渲染页面
//基础渲染，很好看懂
//下面使用了插槽，稍微复杂，看不懂可以往下看
{{ row.chinese }}
{{ row.math }}
{{ row.english }}
{{ row.chinese + row.math + row.english }}
{{
row.isEdit ? "保存" : "编辑"
}}
删除
渲染成果如下
第⑤步：新增功能
利用element设置按钮和弹出层
新增
Submit
Reset
弹出层的数据和我们的参数数组addStu双向绑定
let addStu = reactive({
name: "",
class: "2304",
ch: null,
mh: null,
eh: null,
});
最后按钮的提交函数submitForm()负责调用接口即可（一定要按照接口要求传数据，不然可能会出现奇怪的错误）
第⑥步：编辑功能
6.1步骤一：点击按钮，编辑和保存互相切换
首先是按钮的网页结构
其实很简单，利用插槽基本写法以及
我们上面添加的isEdit，来决定显示内容
{{
row.isEdit ? "保存" : "编辑"
}}
删除
//其次，我们的语数外的页面结构，也应该用插槽&v-if/v-else来处理
如果if条件符合，那么就默认显示span
如果不符合，就显示v-else的input框，供我们修改
{{ row.math }}
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;
};
|