[vue] el-table resolve o problema de que a paginação não pode filtrar todos os dados

prefácio

Ao desenvolver a tabela do projeto front-end recentemente, usei el-table e usei a função de filtragem correspondente, conforme mostrado na figura abaixo. No entanto, encontrei insira a descrição da imagem aqui
a situação real 只能筛选当前页. Pesquisei artigos relacionados no Baidu e descobri que o o motivo é que as condições de filtragem são definidas na coluna, 解决方法:portanto, colocamos a alteração do filtro vinculada à tabela el mais externa, consulte o artigo: https://blog.csdn.net/zhiyikeji/article/details/109563064 , o seguinte código

<el-table
  :data="bookRoomList"
  :ref="bookRoomList"
  @filter-change="handleFilterChange"
  class="bookTable"
  max-height="100%"
  stripe>

Neste ponto, também precisamos definir uma chave de coluna na coluna de filtro correspondente como o status de monitoramento do filtro (os filtros também podem ser alterados para dados no modelo)

<el-table-column
  :filter-multiple="false"
  :filters="[
    {
    
     text: '未审批', value: '0' },
    {
    
     text: '已审批', value: '1' },
    {
    
     text: '不予审批', value: '2' },
  ]"
  column-key="aStatus"
  filter-placement="bottom-end"
  label="审批状态"
  prop="status"
  width="180">
  <template slot-scope="scope">
    <el-tag v-if="scope.row.status=='0'">未审批</el-tag>
    <el-tag type="success" v-if="scope.row.status=='1'">已审批</el-tag>
    <el-tag type="danger" v-if="scope.row.status=='2'">不予审批</el-tag>
  </template>
</el-table-column>

O evento handleFilterChange correspondente é o seguinte:

handleFilterChange(filters) {
    
    
  console.log(filters)
  this.getList();//此处修改为自己定义的查询函数或者其他操作
}

Deve-se observar que os filtros são uma matriz e os seguintes itens são definidos na chave da coluna com antecedência

insira a descrição da imagem aqui
O que defino aqui é aStatus, e os filtros impressos no console são os seguintes:

insira a descrição da imagem aqui
Onde aStatus é o valor correspondente aos filtros

insira a descrição da imagem aqui
filtros.aStatus é uma matriz vazia ao selecionar todos ou redefinir

insira a descrição da imagem aqui
A paginação de uma tabela não pode filtrar todos os problemas e será resolvido.

Acho que você gosta

Origin blog.csdn.net/qq_46123200/article/details/132073644
Recomendado
Clasificación