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
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
O que defino aqui é aStatus, e os filtros impressos no console são os seguintes:
Onde aStatus é o valor correspondente aos filtros
filtros.aStatus é uma matriz vazia ao selecionar todos ou redefinir
A paginação de uma tabela não pode filtrar todos os problemas e será resolvido.