通用后台管理系统前端界面Ⅻ——信息管理页（增删改查封装）

数据渲染方法封装——getData（）

在utils下新建table.js

 拷贝信息列表到信息管理页面，修改根节点的class命名为InfoLists，同时并改scss后，在信息管理页进行使用封装好的getData方法

 新增和修改方法封装

 未封装

 浅封装

 再次封装 ：

table.js

 删除方法封装

 debug：新增数据成功但是没有提示

 由于我没有验证信息清除的问题，并且加上这句话，我会报错，所以我注释掉也不影响。

 InfoLists.vue

 table.js

//获取表格数据
export function getData(root, url, params) {
    root.service
        .get(url, { params: params || {} })
        .then((res) => {
            if (res.data.status === 200) {
                root.tableData = res.data.data;
                root.total = res.data.total;
                root.tableData.forEach((item) => {
                    item.sex === '1' ? (item.sex_text = "男") : (item.sex_text = "女");
                  });
            }
        })
        .catch((error) => {
            throw error;
        });
}

//新增和修改
import qs from "qs";
export function changeInfo(root, method, url, form, callback) {
    let data = qs.stringify(form);
    root.service[method](url, data)
        .then((res) => {
            if (res.data.status === 200) {
                callback(root, url); // = root.getData()
                // root.$refs['form'].resetFields();
                root.dialogFormVisible = false;
                root.$message({ message: res.data.message, type: "success" });
            }
        })
        .catch((error) => {
            throw error;
        });
}
//删除
export function delData(root, url, id, callback) {
    root.$alert("你确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        callback: () => {
            root.service
                .delete(`${url}/${id}`)
                .then((res) => {
                    if (res.data.status === 200) {
                        callback(root, url); // = root.getData()
                        root.$message({ message: res.data.message, type: "success" });
                    }
                })
                .catch((error) => {
                    throw error;
                });
        },
    });
}

 实际上这里的修改后端有问题，应该要传递数据行对象id进行修改。