您现在的位置是:首页 > Javascript
当前栏目
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
2023-03-15 23:26:55 时间
json数据
{"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:在选择下拉框里面的值的时候 将选中的值,传给后端,后端在数据库里面进行查询 返回符合条件的值 大概是这样子的
<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>
相关文章
- 一个可以把web表单变成会话形式的开源框架
- javascript之DOM技术(一)
- javascript之DOM技术(一)
- 解析XML字符串
- 运维前线:一线运维专家的运维方法、技巧与实践1.5 运维自动化的方法论
- javascript事件模型框架
- javascript之DOM技术(二)
- 大数据浪潮下,前端工程师眼中的完整数据链图
- 物联网设备安全1.2 使用网站接口控制照明
- jQuery使用手册(收藏)
- HTML5的你应该记住的一些知识点
- JavaScript原型链和instanceof运算符的暧昧关系
- JavaScript中getter/setter的实现
- 看了《前端,我为什么不要你》有感
- 十个JavaScript中易犯的小错误,你中了几枪?
- JavaScript客户端检测技术详细解析
- 用C#开发ActiveX控件,并使用web调用
- 写给初学前端工程师的一封信
- 纠正前端开发中容易出错知识点
- 很有意思,如何把代码看成一个犯罪现场