json数据
代码语言：javascript复制{"msg":"success","total":0,"code":1,"data":[{"id":5,"userOrganId":null,"userName":"super","sex":1,"realName":"133","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":1,"roleName":"管理员","organId":1,"organName":"test311","authority":1,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":34,"userOrganId":null,"userName":"lijunfei","sex":1,"realName":"qqq","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":41,"roleName":"wangxiaotih","organId":26,"organName":"A部门","authority":0,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":35,"userOrganId":null,"userName":"john","sex":1,"realName":"小猪","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":43,"roleName":"普通管理员","organId":2,"organName":"研发部","authority":0,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":36,"userOrganId":null,"userName":"test","sex":0,"realName":"测试人员","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":43,"roleName":"普通管理员","organId":27,"organName":"测试部","authority":0,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":37,"userOrganId":null,"userName":"www","sex":0,"realName":"ww","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":43,"roleName":"普通管理员","organId":27,"organName":"测试部","authority":0,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":38,"userOrganId":null,"userName":"wwwwww","sex":0,"realName":"www","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":43,"roleName":"普通管理员","organId":27,"organName":"测试部","authority":0,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1}]}
渲染表格
功能需求 1：在input输入框输入终端编号的时候，会查询出一条符合输入终端编号的数据 大概是这样子的
2：在选择下拉框里面的值的时候 将选中的值，传给后端，后端在数据库里面进行查询 返回符合条件的值 大概是这样子的
test.vue<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-select
placeholder="全部部门"
clearable
style="width: 150px; margin-right: 30px"
class="filter-item"
v-model="questionForm.organId"
@change="changeHandler"
>
<el-option
v-for="item in getOrganList"
:key="item.id"
:label="item.organName"
:value="item.id"
></el-option>
</el-select>
<el-button
class="filter-item"
type="primary"
icon="el-icon-search"
@click="searchContList"
>搜索
</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="权限"
:formatter="formatauthority"
></el-table-column>
<el-table-column prop="roleName" label="角色"></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>
</div>
</template>
<script>
//调用接口
import { getQuerycheckList, getOrgan } from "@/api/permission/user";
export default {
data() {
return {
// 分页
currentPage: 1, //初始页
pagesize: 5, // 每页的数据
total: 0,
searchContent: "",
questionForm: {
organName: "",
organId: "",
},
pvData: [],
getOrganList: [],
};
},
watch: {},
created() {
//加载用户列表信息接口
this.getQuerycheckList();
//加载部门
this.getOrgan();
},
methods: {
//部门下拉框
changeHandler(value) {
const checkedItem = this.getOrganList.find((a) => a.id === value);
this.questionForm.organName = checkedItem.organName;
},
// 初始页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() {
//取出来sessionStorage的值
const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
const params = {
userName: "",
organId: "",
userOrganId: userInfo.userOrganId,
authority: userInfo.authority,
page: 1,
rows: 20,
isPagination: false,
};
//搜索内容的参数
if (this.searchContent) {
params.userName = this.searchContent;
}
if (this.questionForm.organId) {
params.organId = this.questionForm.organId;
}
this.dataLoading = true;
getQuerycheckList(params).then((res) => {
if (res.data !== null) {
this.pvData = res.data;
}
this.dataLoading = false;
});
},
//获取部门信息接口定义
getOrgan() {
const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
const params = {
organId: userInfo.userOrganId,
authority: userInfo.authority,
};
this.dataLoading = true;
getOrgan(params).then((res) => {
this.getOrganList = res.data.organs;
this.dataLoading = false;
});
},
//格式化性别
formatSex(row, column) {
return row.sex === 1 ? "男" : "女";
},
//格式化权限
formatauthority(row, column) {
return row.authority === 1 ? "所有部门权限" : "当前部门权限";
},
},
};
</script>
<style scoped>
.tab-container {
margin: 30px;
}
</style>
