效果图如下：
删除
添加
修改
模糊查询
表格样式
代码如下：
<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>
7149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
