<template>
<div>
<el-card class="box-card" :body-style="{ padding: '15px', height: '30px' }">
<el-form :inline="true" :model="keyword" class="demo-form-inline">
<!-- keyword是表单数据对象 -->
<el-form-item label="姓名">
<el-input v-model="keyword.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="keyword.sex" placeholder="请选择性别">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" icon="el-icon-delete" @click="delBatch">批量删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-plus" @click="addDialog = true">添加用户</el-button>
</el-form-item>
<!-- 添加用户对话框 -->
<el-dialog :title="dialogName" :visible.sync="addDialog" width="30%" :before-close="handleClose">
<el-form :model="userInfoAdd" :rules="rules" ref="addForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="userInfoAdd.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age"><!-- prop="age" 绑定age验证规则 -->
<el-input v-model.number="userInfoAdd.age" placeholder="请输入年龄"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-input v-model="userInfoAdd.sex" placeholder="请输入性别(男/女)"></el-input>
</el-form-item>
<el-form-item label="生日" prop="birthday">
<el-date-picker v-model="userInfoAdd.birthday" type="date"
placeholder="选择日期"></el-date-picker>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialog = false">取 消</el-button>
<el-button type="primary" @click="addUserInfo">添加</el-button>
</span>
</el-dialog>
</el-form>
</el-card>
<!-- 渲染用户列表 -->
<el-card class="box-card">
<el-table :data="userInfoList" style="width: 100%" :row-class-name="tableRowClassName"
@selection-change="handleSelectionChange">
<!-- 多选 -->
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="id" label="编号" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="age" label="年龄">
</el-table-column>
<el-table-column prop="sex" label="性别">
<template slot-scope="scope">
<!-- 通过scope.row获取当前行数据，判断sex的值 -->
{{ scope.row.sex === 1 ? '男' : '女' }}
</template>
</el-table-column>
<el-table-column prop="birthday" label="生日">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!-- scope 会自动传入当前行的数据和索引 以通过它访问当前行（scope.row）和当前行的索引（scope.$index）-->
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 表格分页 -->
<el-card class="box-card">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="100"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</el-card>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'UserInfoView',
data() {
return {
keyword: {
name: '',
sex: ''
},
userInfoList: [{
id: '',
name: '',
age: '',
sex: '',
birthday: ''
}
],
currentPage: 1,//当前页
pageSize: 5,//每页显示的条数
total: 0,//总条数
pageNum: 1, //当前页,
idList: [],// 存储选中的 ID 列表
userInfoAdd: {
name: '',
age: null,
sex: '',
birthday: ''
},
addDialog: false,
dialogName: '添加用户',
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value < 0 || value > 120) {
callback(new Error('年龄范围在 0 到 120 之间'));
} else {
callback();
}
},
trigger: 'blur'
}
],
sex: [ // 性别验证规则
{ required: true, message: '请输入性别', trigger: 'blur' },
{
validator: (rule, value, callback) => {
// 只允许输入“男”或“女”
if (value !== '男' && value !== '女') {
callback(new Error('性别只能输入“男”或“女”'));
} else {
callback(); // 验证通过
}
},
trigger: 'blur'
}
],
birthday: [ // 生日验证规则
{ required: true, message: '请选择生日', trigger: 'change' },
{
validator: (rule, value, callback) => {
const today = new Date();
if (value > today) { // 生日不能晚于今天
callback(new Error('生日不能晚于当前日期'));
} else {
callback(); // 验证通过
}
},
trigger: 'change'
}
]
}
}
},
methods: {
//查询全部用户信息
findAll(pageNum, pageSize, keyword) {
axios.get('/userInfo/findAll', {
params: {
pageNum: pageNum,
pageSize: pageSize,
name: keyword.name,
sex: keyword.sex
}
}).then(res => {
console.log(res.data);
if (res.code == 200) {
this.userInfoList = res.data.list,
this.total = res.data.total,
this.pageNum = res.data.pageNum
}
})
},
//搜索
search() {
this.findAll(1, this.pageSize, this.keyword)
},
//当前页面大小改变时触发
handleSizeChange(val) {
this.pageSize = val,
this.findAll(this.pageNum, val, this.keyword)
},
//当前页面改变时触发
handleCurrentChange(val) {
this.pageNum = val,
this.findAll(val, this.pageSize, this.keyword)
},
//单选删除
handleDelete(index, row) {
console.log(index, row.id) //index 是索引 row当前行数据
this.$confirm('您将永久删除该信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.post('/userInfo/deleteUserInfo?id=' + row.id).
then(res => {
if (res.code == 200) {
this.$message({
type: 'success',
message: '删除成功!'
});
} else {
this.$message({
type: 'error',
message: '删除失败!'
});
}
this.findAll(this.pageNum, this.pageSize, this.keyword)
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 多选
delBatch() {
if (this.idList.length == 0) {
this.$message({
type: 'warning',
message: '请选择要删除的用户'
});
return;
}
this.$confirm('是否确认删除用户编号为"[' + this.idList + ']"的数据项?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.post('/userInfo/deleteBatch', this.idList).
then(res => {
if (res.code == 200) {
this.$message({
type: 'success',
message: '删除成功!'
});
} else {
this.$message({
type: 'error',
message: '删除失败!'
});
}
this.findAll(this.pageNum, this.pageSize, this.keyword)
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 更新选中的行
handleSelectionChange(val) {
// 更新 idList 存储选中的 ID
this.idList = val.map(item => item.id);
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => { });
},
//提交添加用户信息
addUserInfo() {
this.$refs.addForm.validate(valid => {
if (valid) { //表单验证成功
if (this.dialogName == "添加用户") {
//添加时性别转换
if (this.userInfoAdd.sex == '男') {
this.userInfoAdd.sex = 1;
} else if (this.userInfoAdd.sex == '女') {
this.userInfoAdd.sex = 0;
}
axios.post('/userInfo/insertUserInfo', this.userInfoAdd).then(res => {
if (res.code == 200) {
this.$message({
message: '添加成功',
type: 'success',
});
this.findAll(this.pageNum, this.pageSize, this.keyword)
this.addDialog = false
this.userInfoAdd = {},// 重置表单
this.$refs.addForm.resetFields(); // 重置验证状态
} else {
this.$message({
message: '添加失败',
type: 'error',
});
}
})
}else if(this.dialogName == '编辑用户'){
axios.post('/userInfo/updateUserInfo').
then(res => {
if (res.code == 200) {
this.$message({
message: '编辑成功',
type: 'success',
});
} else{
this.$message({
message: '编辑失败',
type: 'error',
});
}
})
}
} else {
// 表单验证失败
this.$message({
type: 'warning',
message: '请填写完整信息'
});
return false;//阻止表单提交
}
});
},
addDialog() {
this.dialogName = '添加用户';
this.addDialog = true;
},
handleEdit(dialogName, index, row) {
this.dialogName = dialogName;
this.editDialog = true;
console.log(index, row);
this.userInfoAdd = row;
}
},
// 生命周期函数 created在创建完毕之后执行
created() {
this.findAll(this.pageNum, this.pageSize, this.keyword)
}
}
</script>
<style>
.box-card {
width: 100%;
margin-top: 10px;
}
.demo-form-inline {
float: left;
}
</style>帮我把 编辑 和添加功能完成 要求：公用一个弹出框 只需改这一个需求 别的不需要动
本文分享了解决Element UI表格组件在分页时选中行丢失，导致右侧详情显示错误的问题。通过在表格@current-change事件中加入判断，确保currentRow不为空再操作，避免了分页后报错。
扫一扫
2077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
