el-table,分页，搜索，多条件筛选

 el-table：

• 在每行el-table-column上绑定:filter-method="filterHandler"，只是将该行设为是否显示或隐藏

• el-table的 @filter-change="handleFilterChange" 在点击筛选/重置时均会触发，所以筛选后重新赋给tableData

• :data 和this.$refs.filterTable.data获取到的是当前页显示的

<template>
  <div class="container">
    <el-button @click="clearFilter">清除所有过滤器</el-button>
    
    <el-input
      v-model="selectSearch"
      style="width: 200px; margin-right: 10px;"
      @change="onSearchChange"
      size="medium"
      placeholder="请输入"
    />
      
    <el-table
      ref="filterTable"
      :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
      height="700"
      style="width: 100%"
      @filter-change="handleFilterChange"
    >
      <el-table-column prop="UserName" label="姓名" min-width="50" column-key="UserName" :filters="getUserNameList()"></el-table-column>
      <el-table-column prop="ID" label="ID" min-width="80" column-key="ID" :filters="getIdList()"></el-table-column>
      <el-table-column prop="RoleType" label="产品类型" min-width="80" column-key="RoleType" :filters="getRoleTypeList()"></el-table-column>
      <el-table-column prop="Group" label="组别" min-width="80" column-key="Group" :filters="getGroupList()" :filter-method="filterHandler"></el-table-column>
      <el-table-column prop="CreateTime" label="创建时间" min-width="80" column-key="CreateTime" sortable></el-table-column>
    </el-table>

    <el-pagination
      class="pageination"
      layout="prev, pager, next"
      :current-page.sync="currentPage"
      @current-change="current_change"
      :page-count="total"
      background
    ></el-pagination>
  </div>
</template>

<script>
import { apiGetAllTableData } from "@/api/data";
export default {
  data(){
    return {
      allTableData: [], //表格的整体数据存储变量，对其筛选赋给表格绑定的tableData
      tableData: [],
      pagesize: 27,
      currentPage: 1,
      selectUserNameList: [],
      selectSearch: "",
      selectUserName: [],
      selectRoleType: [],
      selectId: [],
    }
  },
  created(){
    this.GetAllTableData()
  },
  computed: {
    total() {
      return Math.ceil(this.tableData.length / this.pagesize);
    },
  },
  methods: {
    async GetAllTableData(){
      let res = [{
        UserName: "user1",
        ID: "IDA00001",
        RoleType: "manager",
        Group: "Group1",
        CreateTime: "2020-1-1",
      },{
        UserName: "user2",
        ID: "IDA00001",
        RoleType: "finance",
        Group: "Group1",
        CreateTime: "2020-1-1",
      },{
        UserName: "user3",
        ID: "IDA00002",
        RoleType: "manager",
        Group: "Group2",
        CreateTime: "2020-1-1",
      },{
        UserName: "user4",
        ID: "IDA00002",
        RoleType: "staff",
        Group: "Group3",
        CreateTime: "2020-1-1",
      },{
        UserName: "user4",
        ID: "IDA00003",
        RoleType: "staff",
        Group: "Group2",
        CreateTime: "2020-1-1",
      },{
        UserName: "user4",
        ID: "IDA00003",
        RoleType: "finance",
        Group: "Group3",
        CreateTime: "2020-1-1",
      },]
      // let res = await apiGetAllTableData() //获取数据
      console.log('AllTableData:',res); 
      this.allTableData = res;
      this.tableData = res;
    },
    getRoleTypeList(){
      const list = [{
        text: "经理",
        value: "manager"
      },{
        text: "财务",
        value: "finance"
      },{
        text: "普通员工",
        value: "staff"
      },]
      return list;
    },
    getUserNameList(){
      //将selectUserNameList拼成 :filters需要的 {text:"", value: ""} 形式
      const list = this.selectUserNameList.map(item => {return {text: item, value: item}})
      return list;
    },
    getIdList(){
      const list = [{
        text: "用户ID1",
        value: "IDA00001"
      },{
        text: "用户ID2",
        value: "IDA00002"
      }]
      return list;
    },
    getGroupList(){
      const list = [{
        text: "组1",
        value: "Group1"
      },{
        text: "组2",
        value: "Group2"
      }]
      return list;
    },
    current_change(currentPage){
      this.currentPage = currentPage;
    },
    onSearchChange(){
      this.filterDataTable({Search: this.selectSearch})
    },
    handleFilterChange(filters){
      //点击筛选触发的方法，在el-table绑定的 :filter-change方法,filters只能获取到当前筛选的，是{RoleType: ['finance', 'manager']}这种格式
      console.log('filters',filters);
      this.filterDataTable(filters)
    },
    filterDataTable(filters){
      const { UserName, RoleType, ID, Search } = filters;
      //所以要将已筛选过的保存到变量里
      if(typeof UserName != "undefined"){
        this.selectUserName = UserName;
      }
      if(typeof RoleType != "undefined"){
        this.selectRoleType = RoleType;
      }
      if(typeof ID != "undefined"){
        this.selectId = ID;
      }
      if(typeof Search != "undefined"){
        this.selectSearch = Search;
      }
      this.currentPage = 1;
      // console.log(this.selectRoleType,this.selectUserName);
      const list = this.allTableData.filter((item) => {
        const searchCondition = !this.selectSearch || item.ID.toUpperCase().includes(this.selectSearch.toUpperCase())
        const userNameCondition = this.selectUserName.length == 0 || this.selectUserName.includes(item.UserName)
        const IdCondition = this.selectId.length == 0 || this.selectId.includes(item.ID)
        const RoleTypeCondition = this.selectRoleType.length == 0 || this.selectRoleType.includes(item.RoleType)
        return (searchCondition && userNameCondition && IdCondition && RoleTypeCondition)
      })
      this.tableData = list
      // console.log('*---list',list,'tabledata',this.tableData,'this.$refs.filterTable.data:',this.$refs.filterTable.data,'allTableData:',this.allTableData);
    },
    



    
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      console.log('***tabledata:',this.tableData,'this.$refs.filterTable.data:',this.$refs.filterTable.data);
      return row[property] === value;
    },
  }
}
</script>

<style>
.container{
  margin-top: 20px;
  margin-left: 5%;
  margin-right: 5%;
}
.pageination{
  margin-top: 10px;
}
.searchBox{
  text-align: left;
}
</style>