效果图如下：
删除
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?添加
修改?
?
模糊查询
表格样式?
?
?
代码如下：
<template>
? <div>
? ? <el-card class="box-card">
? ? ? <!-- <搜索> -->
? ? ? <el-row>
? ? ? ? <!-- v-model="queryInfo.query" -->
? ? ? ? <el-input
? ? ? ? ? v-model="query"
? ? ? ? ? placeholder="请输入内容"
? ? ? ? ? clearable
? ? ? ? ? style="width: 250px;font-size:20px;font-weight:bold"
? ? ? ? ? class="search"
? ? ? ? ? @clear="fetchdata"
? ? ? ? />
? ? ? ? <el-button
? ? ? ? ? type="primary"
? ? ? ? ? icon="el-icon-search"
? ? ? ? ? style="font-size:20px;font-weight:bold;margin-left:10px"
? ? ? ? ? round
? ? ? ? ? @click="fetchdata"
? ? ? ? >搜索</el-button>
? ? ? ? <el-button
? ? ? ? ? type="primary"
? ? ? ? ? round
? ? ? ? ? style="font-size:20px;font-weight:bold;margin-left:10px"
? ? ? ? ? @click="addDialogVisible=true"
? ? ? ? >
? ? ? ? ? 添加用户
? ? ? ? </el-button>
? ? ? ? <div style="margin-top:20px" />
? ? ? </el-row>
? ? ? <el-table
? ? ? ? :data="tables.slice((pagenum-1)*pageSize,pagenum*pageSize)"
? ? ? ? cell-class-name="cell-class-name"
? ? ? ? bgcolor="black"
? ? ? ? cellspacing="0"
? ? ? ? cellpadding="0"
? ? ? ? :cell-style="tablescolor"
? ? ? ? style="width: 100%;font-size:23px;font-weight:bold;"
? ? ? ? :header-cell-style="tableheader"
? ? ? ? border
? ? ? ? border-color="black"
? ? ? ? fit
? ? ? ? highlight-current-row
? ? ? >
? ? ? ? <el-table-column type="index" width="100px" align="center" label="序号" />
? ? ? ? <!-- <el-table-column prop="id" label="编号" align="center" width="200px" /> -->
? ? ? ? <el-table-column prop="account" label="学号" align="center" width="300px" />
? ? ? ? <el-table-column prop="account_name" label="姓名" align="center" width="100px" />
? ? ? ? <el-table-column prop="pass" label="学历" align="center" width="200px" />
? ? ? ? <el-table-column prop="account_type" label="成绩等级" align="center" width="150px" />
? ? ? ? <el-table-column prop="identity_id" label="身份证号码" align="center" width="300px" />
? ? ? ? <el-table-column prop="phone" label="联系电话" align="center" width="200px" />
? ? ? ? <el-table-column
? ? ? ? ? label="操作"
? ? ? ? ? align="center"
? ? ? ? ? width="319px"
? ? ? ? ? class-name="small-padding fixed-width"
? ? ? ? >
? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? <el-button type="primary" style="font-size:20px;font-weight:bold" @click="handleUpdate(scope.row)">
? ? ? ? ? ? ? 修改
? ? ? ? ? ? </el-button>
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? type="danger"
? ? ? ? ? ? ? style="font-size:20px;font-weight:bold"
? ? ? ? ? ? ? @click="handleDelete(scope.row.id,index)"
? ? ? ? ? ? >
? ? ? ? ? ? ? 删除
? ? ? ? ? ? </el-button>
? ? ? ? ? </template></el-table-column>
? ? ? </el-table>
? ? ? <!-- <添加用户的对话框> -->
? ? ? <el-dialog
? ? ? ? title="添加账户"
? ? ? ? :visible.sync="addDialogVisible"
? ? ? ? width="50%"
? ? ? ? style="font-size:20px;font-weight:bold"
? ? ? ? @close="addDialogClosed"
? ? ? >
? ? ? ? <!-- <内容主题区> -->
? ? ? ? <el-form ref="addFormRef" :model="addForm" :rules="addFormrules" label-width="100px" style="font-size:20px;font-weight:bold">
? ? ? ? ? <!-- <el-form-item label="编号" prop="id">
? ? ? ? ? ? <el-input v-model="addForm.id" />
? ? ? ? ? </el-form-item> -->
? ? ? ? ? <el-form-item label="学号" prop="account_name">
? ? ? ? ? ? <el-input v-model="addForm.account_name" />
? ? ? ? ? </el-form-item>
? ? ? ? ? <el-form-item label="姓名" prop="account">
? ? ? ? ? ? <el-input v-model="addForm.account" />
? ? ? ? ? </el-form-item>
? ? ? ? ? <el-form-item label="学历" prop="pass">
? ? ? ? ? ? <el-select v-model="addForm.pass" placeholder="请选择学历">
? ? ? ? ? ? ? <el-option
? ? ? ? ? ? ? ? v-for="item in options1"
? ? ? ? ? ? ? ? :key="item.value"
? ? ? ? ? ? ? ? :label="item.label"
? ? ? ? ? ? ? ? :value="item.label"
? ? ? ? ? ? ? />
? ? ? ? ? ? </el-select>
? ? ? ? ? </el-form-item>
? ? ? ? ? <el-form-item label="成绩等级" prop="account_type">
? ? ? ? ? ? <el-select v-model="addForm.account_type" placeholder="请选择成绩等级">
? ? ? ? ? ? ? <el-option
? ? ? ? ? ? ? ? v-for="item in options2"
? ? ? ? ? ? ? ? :key="item.value"
? ? ? ? ? ? ? ? :label="item.label"
? ? ? ? ? ? ? ? :value="item.label"
? ? ? ? ? ? ? />
? ? ? ? ? ? </el-select>
? ? ? ? ? </el-form-item>
? ? ? ? ? <el-form-item label="身份证号码" prop="identity_id">
? ? ? ? ? ? <el-input v-model="addForm.identity_id" />
? ? ? ? ? </el-form-item>
? ? ? ? ? <el-form-item label="联系电话" prop="phone">
? ? ? ? ? ? <el-input v-model="addForm.phone" />
? ? ? ? ? </el-form-item>
? ? ? ? </el-form>
? ? ? ? <span slot="footer" class="dialog-footer">
? ? ? ? ? <el-button style="font-size:20px;font-weight:bold" type="primary" round @click="addDialogVisible = false">取 消</el-button>
? ? ? ? ? <el-button style="font-size:20px;font-weight:bold" type="primary" round @click="addconfirm">确 定</el-button>
? ? ? ? </span>
? ? ? </el-dialog>
? ? ? <!-- @close="editDialogClosed" 实现修改账户的重置操作-->
? ? ? <!-- <修改用户对话框> -->
? ? ? <el-dialog
? ? ? ? title="修改信息"
? ? ? ? :visible.sync="editDialogVisible"
? ? ? ? style="font-size:20px;font-weight:bold"
? ? ? ? width="50%"
? ? ? >
? ? ? ? <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">
? ? ? ? ? <!-- <el-form-item label="编号">
? ? ? ? ? ? <el-input v-model="editForm.id" disabled />
? ? ? ? ? </el-form-item> -->
? ? ? ? </el-form>
? ? ? ? <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">
? ? ? ? ? <el-form-item label="学号" prop="account_name">
? ? ? ? ? ? <el-input v-model="editForm.account_name" />
? ? ? ? ? </el-form-item>
? ? ? ? </el-form>
? ? ? ? <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">
? ? ? ? ? <el-form-item label="姓名" prop="account">
? ? ? ? ? ? <el-input v-model="editForm.account" />
? ? ? ? ? </el-form-item>
? ? ? ? </el-form>
? ? ? ? <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">
? ? ? ? ? <el-form-item label="学历" prop="pass">
? ? ? ? ? ? <el-select v-model="editForm.pass" placeholder="请选择学历">
? ? ? ? ? ? ? <el-option
? ? ? ? ? ? ? ? v-for="item in options1"
? ? ? ? ? ? ? ? :key="item.value"
? ? ? ? ? ? ? ? :label="item.label"
? ? ? ? ? ? ? ? :value="item.label"
? ? ? ? ? ? ? />
? ? ? ? ? ? </el-select>
? ? ? ? ? </el-form-item>
? ? ? ? </el-form>
? ? ? ? <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="90px">
? ? ? ? ? <el-form-item label="成绩等级" prop="account_type">
? ? ? ? ? ? <el-select v-model="editForm.account_type" placeholder="请选择成绩等级">
? ? ? ? ? ? ? <el-option
? ? ? ? ? ? ? ? v-for="item in options2"
? ? ? ? ? ? ? ? :key="item.value"
? ? ? ? ? ? ? ? :label="item.label"
? ? ? ? ? ? ? ? :value="item.label"
? ? ? ? ? ? ? />
? ? ? ? ? ? </el-select>
? ? ? ? ? </el-form-item>
? ? ? ? </el-form>
? ? ? ? <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="100px">
? ? ? ? ? <el-form-item label="身份证号码" prop="identity_id">
? ? ? ? ? ? <el-input v-model="editForm.identity_id" />
? ? ? ? ? </el-form-item>
? ? ? ? </el-form>
? ? ? ? <el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="80px">
? ? ? ? ? <el-form-item label="联系电话" prop="phone">
? ? ? ? ? ? <el-input v-model="editForm.phone" />
? ? ? ? ? </el-form-item>
? ? ? ? </el-form>
? ? ? ? <span slot="footer" class="dialog-footer">
? ? ? ? ? <el-button type="primary" round @click="editDialogVisible = false">取 消</el-button>
? ? ? ? ? <el-button type="primary" round @click="editUserInfo">确 定</el-button>
? ? ? ? </span>
? ? ? </el-dialog>
? ? ? <!-- <分页区域> -->
? ? ? <el-pagination
? ? ? ? style="font-size:20px;font-weight:bold"
? ? ? ? :current-page="pagenum"
? ? ? ? :page-sizes="pageSizes"
? ? ? ? :page-size="pageSize"
? ? ? ? background
? ? ? ? layout="total,sizes, prev, pager, next, jumper"
? ? ? ? @size-change="handleSizeChange"
? ? ? ? @current-change="handleCurrentChange"
? ? ? />
? ? </el-card>
? </div>
</template>
<script>
import axios from 'axios'
// import pagination from '../../components/pagination.vue'
export default {
? data() {
? ? // 验证电话号码的规则自定义
? ? var checkphone = (rule, value, cb) => {
? ? ? // 验证电话号码的正则表达式
? ? ? const regphone = /^(0|86|17951)?(13[0~9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
? ? ? if (regphone.test(value)) {
? ? ? ? return cb()
? ? ? }
? ? ? cb(new Error('请输入合法的电话号码'))
? ? }
? ? return {
? ? ? list: null,
? ? ? tableData: [],
? ? ? // 获取列表的参数对象
?
? ? ? query: '',
? ? ? // 当前的页数
? ? ? pagenum: 1,
? ? ? // 当前每页显示多少条数据
? ? ? pageSize: 10,
? ? ? // 个数选择器
? ? ? pageSizes: [3, 5, 10]，
? ? ? total: 0,
? ? ? editDialogVisible: false,
? ? ? editForm: {
? ? ? ? id: '',
? ? ? ? account_name: '',
? ? ? ? account: '',
? ? ? ? pass: '',
? ? ? ? account_type: '',
? ? ? ? identity_id: '',
? ? ? ? phone: ''
? ? ? },
? ? ? // 控制添加对话框
? ? ? addDialogVisible: false,
? ? ? addForm: {
? ? ? ? id: '',
? ? ? ? account_name: '',
? ? ? ? account: '',
? ? ? ? pass: '',
? ? ? ? account_type: '',
? ? ? ? identity_id: '',
? ? ? ? phone: ''
? ? ? },
? ? ? // 添加表单的验证规则对象
? ? ? addFormrules: {
? ? ? ? account_name: [
? ? ? ? ? { required: true, message: '请输入学号', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? min: 2,
? ? ? ? ? ? max: 20,
? ? ? ? ? ? message: '学号的长度在2~20个字符',
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? account: [
? ? ? ? ? { required: true, message: '请输入姓名', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? min: 2,
? ? ? ? ? ? max: 20,
? ? ? ? ? ? message: '姓名的长度在2~20个字符',
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? pass: [
? ? ? ? ? { required: true, message: '请选择学历', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? account_type: [
? ? ? ? ? { required: true, message: '请选择成绩等级', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? identity_id: [
? ? ? ? ? { required: true, message: '请输入身份证号码', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? min: 18,
? ? ? ? ? ? max: 18,
? ? ? ? ? ? message: '身份证的长度为18个字符',
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? phone: [
? ? ? ? ? { required: true, message: '请输入电话号码', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? min: 11,
? ? ? ? ? ? max: 11,
? ? ? ? ? ? message: '电话号码的长度为11个字符',
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? { validator: checkphone, trigger: 'blur' }
? ? ? ? ]
? ? ? },
? ? ? // 修改表单的验证规则对象
? ? ? editFormrules: {
? ? ? ? account_name: [
? ? ? ? ? { required: true, message: '请输入学号', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? min: 2,
? ? ? ? ? ? max: 10,
? ? ? ? ? ? message: '学号的长度在2~10个字符',
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? account: [
? ? ? ? ? { required: true, message: '请输入姓名', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? min: 2,
? ? ? ? ? ? max: 10,
? ? ? ? ? ? message: '姓名的长度在2~10个字符',
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? pass: [
? ? ? ? ? { required: true, message: '请选择学历', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? account_type: [
? ? ? ? ? { required: true, message: '请选择成绩等级', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? identity_id: [
? ? ? ? ? { required: true, message: '请输入身份证号码', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? min: 18,
? ? ? ? ? ? max: 18,
? ? ? ? ? ? message: '身份证的长度为18个字符',
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? phone: [
? ? ? ? ? { required: true, message: '请输入电话号码', trigger: 'blur'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? min: 11,
? ? ? ? ? ? max: 11,
? ? ? ? ? ? message: '电话号码的长度为11个字符',
? ? ? ? ? ? trigger: 'blur'
? ? ? ? ? }
??
? ? ? ? ]
? ? ? },
? ? ? options1: [{
? ? ? ? value: '选项1',
? ? ? ? label: '小学'
? ? ? }, {
? ? ? ? value: '选项2',
? ? ? ? label: '初中'
? ? ? }, {
? ? ? ? value: '选项3',
? ? ? ? label: '高中/职中/中专'
? ? ? }, {
? ? ? ? value: '选项4',
? ? ? ? label: '大学专科'
? ? ? }, {
? ? ? ? value: '选项5',
? ? ? ? label: '大学本科'
? ? ? }, {
? ? ? ? value: '选项6',
? ? ? ? label: '研究生'
? ? ? }, {
? ? ? ? value: '选项7',
? ? ? ? label: '硕士'
? ? ? }, {
? ? ? ? value: '选项8',
? ? ? ? label: '博士'
? ? ? }, {
? ? ? ? value: '选项5',
? ? ? ? label: '博士后'
? ? ? }],
? ? ? value: '',
? ? ? options2: [{
? ? ? ? value: '选项1',
? ? ? ? label: '优秀'
? ? ? }, {
? ? ? ? value: '选项2',
? ? ? ? label: '良好'
? ? ? }, {
? ? ? ? value: '选项3',
? ? ? ? label: '及格'
? ? ? }, {
? ? ? ? value: '选项4',
? ? ? ? label: '不及格'
? ? ? }]
? ? }
? },
? // 实现模糊查询
? computed: {
? ? tables() {
? ? ? const query = this.query
? ? ? if (query) {
? ? ? ? // console.log('输入的搜索内容：' + this.query)
? ? ? ? return this.tableData.filter(data => {
? ? ? ? ? // console.log('object:' + Object.keys(data))
? ? ? ? ? return Object.keys(data).some(key => {
? ? ? ? ? ? return String(data[key]).toLowerCase().indexOf(query) > -1
? ? ? ? ? })
? ? ? ? })
? ? ? }
? ? ? return this.tableData
? ? }
? },
? mounted() {
? ? this.fetchdata()
? },
? methods: {
? ? // 获取后端数据，采用的是mock数据。mock平台地址：fastmock 在线接口 Mock 平台
? ? async fetchdata() {
? ? ? axios
? ? ? ? .get(
? ? ? ? ? 'https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/classinfo'
? ? ? ? )
? ? ? ? .then((response) => {
? ? ? ? ? console.log(response)
? ? ? ? ? this.tableData = response.data.data
? ? ? ? ? this.total = response.data.data.length
? ? ? ? })
? ? },
? ? tablescolor() {
? ? return 'border-color:black; border:1px solid black;border-collapse:collapse'
? ? },
? ? tableheader() {
? ? ?return 'background:#2c8DF4;color:white;border-color:black; border:1px solid black;'
? ? ?},
? ? // 修改用户信息并提交
? ? editUserInfo() {
? ? ? this.$refs.editFormRef.validate(valid => {
? ? ? ? if (!valid) return
? ? ? ? // 发起修改用户信息的数据请求/
? ? ? axios.put('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park' + this.editForm.id, {
? ? ? ? // ? account_name: this.editForm.account_name,
? ? ? ? // ? account: this.editForm.account,
? ? ? ? // ? pass: this.editForm.pass,
? ? ? ? // ? account_type: this.editForm.account_type,
? ? ? ? // ? identity_id: this.editForm.identity_id,
? ? ? ? // ? phone: this.editForm.phone
? ? ? ? // })
? ? ? ? // if (res.status !== 200) {
? ? ? ? // ? return this.$message.error('更新用户信息失败！')
? ? ? ? // }
? ? ? ? // 关闭对话框
? ? ? ? this.editDialogVisible = false
? ? ? ? // 刷新数据列表
? ? ? ? // this.fetchdata()
? ? ? ? // 提升修改成功
? ? ? ? this.$message.success('更新用户信息成功！')
? ? ? })
? ? },
? ? // 监听pagesize改变的事件
? ? handleSizeChange(newsize) {
? ? ? this.pageSize = newsize
? ? ? this.pagenum = 1
? ? ? this.fetchdata()
? ? },
? ? // 监听 页码值 改变的事件
? ? handleCurrentChange(newPage) {
? ? ? this.pagenum = newPage
? ? ? this.fetchdata()
? ? },
? ? // 修改用户信息
? ? async handleUpdate(row) {
? ? ? // console.log(row)
? ? ? // const { data: res } = await axios.post('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park' + row)
? ? ? // if (res.status !== 200) {
? ? ? // ? return this.$message.error('查询用户信息失败！')
? ? ? // }
? ? ? // this.editForm = res.data.data
? ? ? // this.editForm = Object.assign({}, row)
? ? ? // this.dialogStatus = 'update'
? ? ? this.editDialogVisible = true
? ? ? this.editForm = row
? ? },
? ? handleDelete(_row, index) {
? ? ? this.$notify({
? ? ? ? title: '成功',
? ? ? ? message: '删除成功',
? ? ? ? type: 'success',
? ? ? ? duration: 2000
? ? ? })
? ? ? this.tableData.splice(index, 1)
? ? ? // axios.delete('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park' + id)
? ? ? // ? .then(resp => {
? ? ? // ? ? if (resp.status === 200) {
? ? ? // ? ? ? alert('删除成功')
? ? ? // ? ? ? this.fetchdata()
? ? ? // ? ? } else {
? ? ? // ? ? ? alert('删除失败')
? ? ? // ? ? }
? ? ? // ? })
? ? },
? ? // 修改用户框关闭事件实现修改账户的重置操作
? ? // editDialogClosed() {
? ? // ? this.$refs.editFormRef.resetFields()
? ? // },
? ? // 添加用户框的关闭事件
? ? addDialogClosed() {
? ? ? this.$refs.addFormRef.resetFields()
? ? },
? ? // 点击按钮添加新用户
? ? addconfirm() {
? ? ? this.$refs.addFormRef.validate(async valid => {
? ? ? ? if (valid) {
? ? ? ? ? axios.post('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park', this.addForm)
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? if (res.status === 200) {
? ? ? ? ? ? ? ? alert('添加成功')
? ? ? ? ? ? ? ? this.addForm = {}
? ? ? ? ? ? ? ? this.addDialogVisible = false
? ? ? ? ? ? ? ? this.fetchdata()
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? alert('添加失败')
? ? ? ? ? ? ? }
? ? ? ? ? ? }).catch(error => console.log(error))
? ? ? ? } else { alert('校验失败') }
? ? ? ? // if (!valid) return
? ? ? ? // console.log(valid)
? ? ? ? // 请求发起添加用户的请求
? ? ? ? // const { data: res } = await
? ? ? ? // axios.post('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park', { params: { addForm: this.addForm }})
? ? ? ? // ? .then(res => {
? ? ? ? // ? ? if (res.status !== 200) {
? ? ? ? // ? ? ? this.$message.error('添加用户失败')
? ? ? ? // ? ? }
? ? ? ? // ? ? this.$message.success('添加用户成功！')
? ? ? ? // ? ? // 隐藏添加用户的对话款
? ? ? ? // ? ? console.log(res.data.data)
? ? ? ? // ? ? this.tableData = res.data.data
? ? ? ? // ? ? this.addDialogVisible = false
? ? ? ? // ? ? this.$set(this.tableData, this.addForm.value, res.data.data)
? ? ? ? // ? ? // 重新获取用户的列表信息
? ? ? ? // ? ? this.fetchdata()
? ? ? ? // ? })
? ? ? })
? ? }
? }
}
</script>
<style scoped>
/* .el-pagination {
? margin-top: 15px;
}
.el-table--border th,
.el-table--border td{
? border-color:blue;
}
.el-table{
color:#000000;
} */
</style>