数据渲染方法封装——getData（）
在utils下新建table.js
拷贝信息列表到信息管理页面，修改根节点的class命名为InfoLists，同时并改scss后，在信息管理页进行使用封装好的getData方法
新增和修改方法封装
未封装
浅封装
再次封装 ：
table.js
删除方法封装
debug：新增数据成功但是没有提示
由于我没有验证信息清除的问题，并且加上这句话，我会报错，所以我注释掉也不影响。
InfoLists.vue
<template>
<div class="InfoLists">
<!-- 查询、重置 -->
<el-form
:inline="true"
:model="formInline"
class="demo-form-inline"
size="small"
>
<el-form-item>
<el-input
v-model="formInline.name"
prefix-icon="el-icon-search"
placeholder="请输入姓名"
></el-input>
</el-form-item>
<el-form-item>
<el-button
@click="find()"
type="primary"
icon="el-icon-search"
circle
size="small"
></el-button>
</el-form-item>
<el-form-item>
<el-button
type="success"
@click="addUser()"
circle
size="small"
icon="el-icon-circle-plus-outline"
></el-button>
</el-form-item>
<el-form-item>
<el-button
type="success"
plain
@click="refresh()"
circle
size="small"
icon="el-icon-refresh"
></el-button>
</el-form-item>
<el-form-item>
<el-button
type="danger"
plain
@click="delPitch()"
circle
size="small"
icon="el-icon-delete"
></el-button>
</el-form-item>
</el-form>
<!-- <el-table :data="
tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
" height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> -->
<el-table
:data="compData"
height="450"
border
style="width: 100%"
:default-sort="{ prop: 'number', order: 'Ascending' }"
>
<!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
<el-table-column type="selection" width="55"> </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="father" label="父亲" align="center">
</el-table-column>
<el-table-column prop="mather" label="母亲" align="center">
</el-table-column>
<el-table-column prop="time" 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="操作" width="100" align="center">
<template slot-scope="scope">
<el-button
@click="edit(scope.row)"
type="primary"
icon="el-icon-edit"
circle
size="mini"
></el-button>
<el-button
@click="del(scope.row)"
type="danger"
icon="el-icon-delete"
circle
size="mini"
></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>
<el-dialog
:title="compTitle"
:visible.sync="dialogFormVisible"
width="500px"
>
<el-form :model="newUserForm" :rules="rules" ref="newUserForm">
<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
<el-input v-model="newUserForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
label="性别"
:label-width="formLabelWidth"
prop="sex"
icon="el-icon-male"
>
<el-radio v-model="newUserForm.sex" label="1"
><i class="el-icon-male"></i>男</el-radio
>
<el-radio v-model="newUserForm.sex" label="2"
><i class="el-icon-female"></i>女</el-radio
>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
<el-input v-model="newUserForm.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
label="父亲姓名"
:label-width="formLabelWidth"
prop="father"
>
<el-input v-model="newUserForm.father" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
label="母亲姓名"
:label-width="formLabelWidth"
prop="mather"
>
<el-input v-model="newUserForm.mather" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
label="入校时间"
:label-width="formLabelWidth"
prop="time"
>
<el-date-picker
v-model="newUserForm.time"
align="right"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy/MM/dd"
type="date"
placeholder="选择入校日期"
:picker-options="pickAfter"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="家庭住址"
:label-width="formLabelWidth"
prop="address"
>
<el-input v-model="newUserForm.address" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
label="联系方式"
:label-width="formLabelWidth"
prop="phone"
>
<el-input v-model="newUserForm.phone" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeForm('newUserForm')">取 消</el-button>
<el-button type="primary" @click="confirm('newUserForm')"
>确 定</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import { getData, changeInfo, delData } from "@/utils/table.js";
import {
NotNullRule,
newUsernameRule,
ageRule,
phoneRule,
} from "@/utils/validate";
export default {
data() {
return {
tableData: [],
currentPage: 1, //当前页数
pageSize: 10, //每页显示条数
total: 0,
dialogFormVisible: false,
formInline: {
name: "",
},
newUserForm: {
name: "",
sex: "1",
age: "",
father: "",
mather: "",
time: "",
address: "",
phone: "",
},
pickAfter: {
disabledDate(time) {
return time.getTime() > Date.now(); // 如果没有后面的-8.64e7就是不可以选择今天的
},
},
rules: {
name: [{ validator: newUsernameRule, trigger: "blur", required: true }],
sex: [{ validator: NotNullRule, trigger: "blur", required: true }],
age: [{ validator: ageRule, trigger: "blur", required: true }],
time: [{ validator: NotNullRule, trigger: "blur", required: true }],
address: [{ validator: NotNullRule, trigger: "blur", required: true }],
phone: [{ validator: phoneRule, trigger: "blur", required: true }],
},
formLabelWidth: "80px",
formState: true,
};
},
created() {
getData(this, '/info');
},
computed: {
compData() {
return this.tableData.slice(
(this.currentPage - 1) * this.pageSize,
this.currentPage * this.pageSize
);
},
compTitle() {
return this.formState ? "修改用户信息" : "新增用户信息";
},
},
methods: {
addUser() {
this.formState = false;
this.dialogFormVisible = true;
this.newUserForm = {
name: "",
sex: "1",
age: "",
father: "",
mather: "",
time: "",
address: "",
phone: "",
};
},
edit(row) {
this.formState = true;
this.dialogFormVisible = true;
// this.newUserForm = row;
this.newUserForm = { ...row };
},
confirm(newUserForm) {
this.$refs[newUserForm].validate((valid) => {
if (valid) {
let methods = ''
this.formState ? methods = 'put' : methods = 'post'
changeInfo(this, methods, '/info', this.newUserForm, getData)
}
});
},
closeForm(newUserForm) {
this.$refs[newUserForm].resetFields();
this.dialogFormVisible = false;
},
find() {
this.getData(this.formInline);
},
refresh() {
this.formInline = {};
this.getData(this.formInline);
},
del(row) {
delData(this, '/info', row.id, getData)
},
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
},
handleCurrentChange(val) {
this.currentPage = val;
},
},
};
</script>
<style lang="scss">
.InfoLists {
.demo-form-inline {
text-align: left;
}
.el-pagination {
text-align: left;
margin-top: 20x;
}
}
</style>
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进行修改。