效果 1：表格以及分页
2：增加一条数据
3：删除一条数据
4：修改一条数据
5：查询一条数据
实例：
代码语言：javascript复制<template>
<div class="tab-container">
<div class="filter-container" style="margin-bottom: 20px">
<el-input
maxlength="40"
placeholder="用户名"
style="width: 200px"
class="filter-item"
v-model="searchContent"
@keyup.enter.native="handleFilter"
/>
<el-button
class="filter-item"
type="primary"
icon="el-icon-search"
@click="searchContList"
>搜索
</el-button>
<el-button
class="filter-item"
style="margin-left: 10px"
type="primary"
icon="el-icon-edit"
@click="handleCreate"
>新增用户
</el-button>
</div>
<el-table
:data="pvData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column
prop="userName"
label="用户名"
width="180"
></el-table-column>
<el-table-column prop="realName" label="姓名"></el-table-column>
<el-table-column prop="sex" label="性别" :formatter="formatSex"></el-table-column>
<el-table-column prop="organName" label="所属部门"></el-table-column>
<el-table-column prop="authority" label="权限"></el-table-column>
<el-table-column prop="roleName" label="角色"></el-table-column>
<el-table-column
label="操作"
align="center"
width="230"
class-name="small-padding fixed-width"
>
<template slot-scope="{ row, $index }">
<el-button type="primary" size="mini" @click="handleUpdate(row)"
>编辑</el-button
>
<el-button
v-if="row.status != 'deleted'"
size="mini"
type="danger"
@click="handleDelete($index, row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin: 12px 0px"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="pvData.length"
>
</el-pagination>
<!-- 弹框 -->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form
:model="questionForm"
ref="dataForm"
label-position="left"
label-width="90px"
style="width: 400px; margin-left: 50px"
>
<el-form-item label="用户名" prop="userName">
<el-input v-model="questionForm.userName" />
</el-form-item>
<el-form-item label="昵称" prop="realName">
<el-input v-model="questionForm.realName" />
</el-form-item>
<el-form-item label="性别">
<el-select
v-model="questionForm.sex"
class="filter-item"
placeholder="选择性别"
style="width:100%"
>
<el-option
v-for="item in sexOptions"
:key="item.key"
:label="item.label"
:value="item.key"
/>
</el-select>
</el-form-item>
<el-form-item label="角色">
<el-select
v-model="questionForm.roleName"
class="filter-item"
placeholder="选择角色"
style="width:100%"
>
<el-option
v-for="item in roleNameOptions"
:key="item.key"
:label="item.label"
:value="item.key"
/>
</el-select>
</el-form-item>
<el-form-item label="部门">
<el-select v-model="questionForm.organName" placeholder="请选择" style="width:100%" >
<el-option
v-for="item in getOrganList"
:key="item.id"
:label="item.organName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="questionForm.password" />
</el-form-item>
<el-form-item label="密码确认" prop="password">
<el-input type="password" v-model="questionForm.password" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button
type="primary"
@click="dialogStatus === 'create' ? createData() : updateData()"
>确定</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
//调用接口
import {
getQuerycheckList,
saveSubject,
updateSubject,
deleteSubject,
getOrgan,
} from "@/api/permission/user";
export default {
data() {
return {
// 分页
currentPage: 1, //初始页
pagesize: 5, // 每页的数据
total: 0,
searchContent: "",
//规则
input: "",
dialogPvVisible: false,
questionForm: {
userName: "",
realName: "",
organId: 1,
organName: "",
// sex: 1,
sex: [],
roleId: 1,
roleName: "",
authority: 1,
password: "",
companyId: 1,
},
sexOptions: [
{ label: "男", key: 1 },
{ label: "女", key: 0 },
],
roleNameOptions: [
{ label: "管理员", key: 1 },
{ label: "普通用户", key: 0 },
],
activeName: "CN",
dialogFormVisible: false,
dialogStatus: "",
textMap: {
update: "编辑",
create: "添加",
},
pvData: [],
getOrganList: [],
};
},
watch: {},
created() {
//加载用户列表信息接口
this.getQuerycheckList();
//加载部门
this.getOrgan();
},
methods: {
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize); //每页下拉显示数据
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //点击第几页
},
// 查询按钮
searchContList() {
this.getQuerycheckList();
},
//查询题目列表信息接口
getQuerycheckList() {
const params = {
// userName: "",
organId: 1,
userOrganId: 1,
authority: 0,
page: 1,
rows: 5,
isPagination: false,
};
// //题目内容的参数
if(this.searchContent){
params.userName= this.searchContent
}
this.dataLoading = true;
getQuerycheckList(params).then((res) => {
console.log("查询题目列表信息", res);
this.pvData = res.data;
// this.total=res.data.questionCount;
// this.questionNormalCount=res.data.questionNormalCount;
this.dataLoading = false;
});
},
//获取部门信息接口定义
getOrgan() {
const params = {
organId: 1,
authority: 1,
};
this.dataLoading = true;
getOrgan(params).then((res) => {
console.log("查询部门列表信息", res);
this.getOrganList = res.data.organs;
this.dataLoading = false;
});
},
handleModifyStatus(row, status) {
this.$message({
message: "操作Success",
type: "success",
});
row.status = status;
},
//新增表单里面的值
handleCreate() {
this.questionForm = {
userName: "",
realName: "",
organId: 1,
organName: "",
sex: undefined,
roleId: 1,
roleName: "",
authority: 1,
password: "",
companyId: 1,
};
this.dialogStatus = "create";
this.dialogFormVisible = true;
this.$nextTick(() => {
this.$refs["dataForm"].clearValidate();
});
},
//添加用户
async createData() {
let form = null;
if (!this.questionForm.userName) {
this.$message({
message: "必须填写用户名",
type: "error"
});
return;
}
if (!this.questionForm.realName) {
this.$message({
message: "必须填写用户昵称",
type: "error"
});
return;
}
form = this.questionForm;
const params = form;
const res = await saveSubject(params);
console.log(res);
if (res.code === 1) {
this.$message({
type: "info",
message: "保存成功",
});
this.dialogFormVisible = false;
this.getQuerycheckList();
return;
}
this.$message({
type: "error",
message: "保存失败",
});
},
//编辑弹出框
handleUpdate(row) {
this.questionForm = row;
this.getQuerycheckList();
this.dialogStatus = "update";
this.dialogFormVisible = true;
this.$nextTick(() => {
this.$refs["dataForm"].clearValidate();
});
},
updateData() {
const params = {
userName: this.questionForm.userName,
realName: this.questionForm.realName,
organId: 1,
organName: this.questionForm.organName,
sex: 1,
roleId: 1,
roleName: this.questionForm.roleName,
authority: 1,
password: this.questionForm.password,
companyId: 1,
id:this.questionForm.id
};
updateSubject(params).then((res) => {
console.log(res);
this.$notify({
title: "Success",
message: "更新成功",
type: "success",
duration: 2000,
});
this.dialogFormVisible = false;
this.getQuerycheckList();
});
},
//调用删除接口
handleDelete(index, row) {
const params = {
id: row.id,
};
this.dataLoading = true;
deleteSubject(params).then((res) => {
this.$notify({
message: "删除成功",
type: "success",
duration: 2000,
});
this.getQuerycheckList();
console.log(this.pvData);
this.dataLoading = false;
});
},
//格式化性别
formatSex(row, column) {
return row.sex === 1? "男" : "女";
}
},
};
</script>
<style scoped>
.tab-container {
margin: 30px;
}
</style>
