vue搜索表格功能，根据input输入框和下拉框传递的参数进行搜索

落日映苍穹つ 2022-09-02 04:20 256阅读 0赞

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}]}

![d1d787099a0e626f6d2116fdc3a6f055.png][]

渲染表格

![dc509af22e5ce5596805c4d762574f6c.png][]

功能需求  
1：在input输入框输入终端编号的时候，会查询出一条符合输入终端编号的数据  
大概是这样子的

![3f362c0c07d28a048e87ae3f59fc2188.gif][]

2：在选择下拉框里面的值的时候  
将选中的值，传给后端，后端在数据库里面进行查询  
返回符合条件的值  
大概是这样子的

![eb58ad744e1ae52d0bb61d6e9196a530.gif][]

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>

[d1d787099a0e626f6d2116fdc3a6f055.png]: /images/20220829/c2adfad3bb70426893477a3cf04935dd.png
[dc509af22e5ce5596805c4d762574f6c.png]: /images/20220829/bfdb6a3666284a6cb8dbdb95adcd41af.png
[3f362c0c07d28a048e87ae3f59fc2188.gif]: /images/20220829/e83af0386da04917a74a0ec5b4e6dc8e.png
[eb58ad744e1ae52d0bb61d6e9196a530.gif]: /images/20220829/e7502b0b2ca34122a71dfc55b80e1d4c.png