纯前端分页及筛选

<template>
  <el-card class="box-card">
    <div class="demo-pagination-block">
      <div class="search-box">
        <el-input
          v-model="data.searchParam"
          placeholder="请输入手机号/用户名"
          style="width: 300px"
          class="fl distance"
          clearable
          @keyup.enter="handleFilter"
          @clear="handleFilter"
        >
          <template #append>
            <el-button @click="handleFilter">
              <el-icon
                class="no-inherit"
                style="width: 1em; height: 1em; margin-right: 8px"
              >
                <Search />
              </el-icon>
            </el-button>
          </template>
        </el-input>
        <el-select
          v-model="data.searchOperator"
          class="m-2 fl distance"
          placeholder="Select"
          filterable
          clearable
          @clear="handleFilter"
          :filter-method="handleFilter"
        >
          <el-option key="operator" label="运维人员" value="operator" />
          <el-option key="enduser" label="终端用户" value="enduser" />
        </el-select>
        <el-button
          class="fr"
          type="primary"
          style="width: 80px"
          @click="toAddUser()"
          >新增</el-button
        >
      </div>
      <section class="table-box">
        <ComTable
          ref="multipleTable"
          :data="data.paddingList"
          fit
          highlight-current-row
          style="width: 100%"
          height="65vh"
          @selection-change="handleTableSelectionChange"
        >
          <el-table-column
            fixed
            type="selection"
            label="\"
            prop="id"
            align="center"
            width="50"
            label-class-name="DisabledSelection"
          >
          </el-table-column>
          <el-table-column
            label="用户名"
            show-overflow-tooltip
            prop="userName"
            min-width="100px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="角色"
            show-overflow-tooltip
            prop="userRole"
            min-width="100px"
            align="center"
          >
            <template v-slot="scope">
              {
    
    {
    
    
                scope.row.userRole == "operator"
                  ? "运维人员"
                  : scope.row.userRole == "enduser"
                  ? "终端用户"
                  : "--"
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            show-overflow-tooltip
            prop="createTime"
            min-width="150px"
            align="center"
          >
            <template v-slot="scope">
              {
    
    {
    
     changeTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column
            label="手机号码"
            show-overflow-tooltip
            prop="phoneNum"
            min-width="100px"
            align="center"
          >
            <template v-slot="scope">
              {
    
    {
    
     scope.row.phoneNum || "--" }}
            </template>
          </el-table-column>
          <el-table-column
            label="账号状态"
            show-overflow-tooltip
            prop="accountStat"
            min-width="100px"
            align="center"
          >
            <template v-slot="scope">
              <span
                :class="
                  scope.row.accountStat == 'activated' ? 'active_item' : ''
                "
                >{
    
    {
    
    
                  scope.row.accountStat == "activated" ? "已激活" : "未激活"
                }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="260">
            <template v-slot="scope">
              <el-button
                style="width: 1em; height: 1em; margin: 8px"
                link
                @click="editSingleUser(scope.row)"
                title="编辑"
              >
                <el-icon>
                  <EditPen />
                </el-icon>
                <!-- 编辑 -->
              </el-button>
              <el-button
                link
                style="width: 1em; height: 1em; margin: 8px"
                @click="singleResetPassword(scope.row)"
                title="重置密码"
              >
                <el-icon>
                  <Key />
                </el-icon>
                <!-- 重置密码 -->
              </el-button>
              <el-button
                link
                style="width: 1em; height: 1em; margin: 8px"
                @click="deleteSingleUserBtn(scope.row)"
                title="删除"
              >
                <el-icon>
                  <Delete />
                </el-icon>
                <!-- 删除 -->
              </el-button>
            </template>
          </el-table-column>
        </ComTable>
      </section>
      <div class="footer_delete_pagination_con">
        <div style="padding: 8px">
          <el-checkbox
            style="padding-left: 20px"
            label="全选"
            :indeterminate="data.isIndeterminate"
            v-model="data.checkAll"
            @change="selAll()"
          ></el-checkbox>
          <el-dropdown style="margin-left: 20px; margin-top: 8px">
            <span class="el-dropdown-link">
              批量操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="delete" @click="deleteBatchUserBtn()"
                  >批量删除
                </el-dropdown-item>
                <el-dropdown-item command="reset" @click="batchResetPassword">
                  批量重置密码</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="data.pageSize"
          :page-sizes="[20, 50, 100, 150]"
          :current-page="data.currentPage"
          :total="data.total"
        >
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
import {
    
     ref, reactive, onMounted } from "vue";
import {
    
     useRouter } from "vue-router";
import {
    
     getCurrentInstance } from "@vue/runtime-core";
import {
    
     EditPen, Key, Delete } from "@element-plus/icons-vue";
import {
    
     Search } from "@element-plus/icons-vue";
import User from "@/utils/api/user";
import {
    
     ElMessage, ElMessageBox } from "element-plus";
import ComTable from "@/components/ComTable/BaseComTable.vue";
const router = useRouter();

const data = reactive({
    
    
  fileName: "",
  userDataListAll: [],
  userDataList: [],
  total: 0, //用户列表长度
  pageSize: 20, //每页多少条数据
  currentPage: 1, //当前页
  searchList: [], //用来接收总数据
  paddingList: [], //计算后需要展示的页面数据
  searchParam: "", //搜索关键词
  searchOperator: "", //搜索关键词
  TableData: [],
});
//筛选
const handleFilter = () => {
    
    
  if (data.searchOperator == "" && data.searchParam == "") {
    
    //如果都为空，则返回所有数据
    data.userDataList = data.userDataListAll;
  } else if (data.searchOperator != "" || data.searchParam != "") {
    
    //有一个不为空
    data.userDataList = data.userDataListAll.filter((item) => {
    
    
      if (data.searchParam != "" && data.searchOperator != "") {
    
     //俩都不为空
        return (
          (item.userName.indexOf(data.searchParam) != -1 ||
            item.phoneNum?.indexOf(data.searchParam) != -1) &&
          item.userRole.indexOf(data.searchOperator) != -1
        );
      } else if (data.searchParam != "") {
    
    
        // if (item.phoneNum)
        return (
          item.userName.indexOf(data.searchParam) != -1 ||
          (item.phoneNum?.indexOf(data.searchParam) != -1 && item.phoneNum)
        );
      } else if (data.searchOperator != "") {
    
    
        return item.userRole.indexOf(data.searchOperator) != -1;
      }
    });
  } else {
    
    
    data.userDataList = [];
  }
  data.total = data.userDataList.length;
  pagingFunction();
};
// 前端分页
const pagingFunction = () => {
    
    
  // 前端分页，关键一步；
  data.paddingList = data.userDataList.slice(
    (data.currentPage - 1) * data.pageSize,
    data.currentPage * data.pageSize
  );
};

/**
 * 分页函数
 */
const handleSizeChange = (val) => {
    
    
  data.pageSize = val;
  pagingFunction();
};
const handleCurrentChange = (val) => {
    
    
  data.currentPage = val;
  pagingFunction();
};

/**
 * 挂载
 */
onMounted(() => {
    
    
  // 获取用户列表
  getAllUserList();
});
</script>