[vue] el-table はページングがすべてのデータをフィルターできない問題を解決します

序文

最近フロントエンドプロジェクトのテーブルを開発する際、下図のようにel-tableを利用し、それに対応したフィルタリング機能を利用していたのですが、その実態をBaiduで関連記事を検索してみた
ところ只能筛选当前页、その理由は、フィルタリング条件が列に定義されている解决方法：ため、filter-change を最も外側の el-table にバインドするためです。記事を参照してください: https://blog.csdn.net/zhiyikeji/article/details/109563064、次のコード

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

この時点で、フィルターの監視ステータスとして、対応するフィルター列に列キーを定義する必要もあります (フィルターをモデル内のデータに変更することもできます)。

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

対応する handleFilterChange イベントは次のとおりです。

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

なお、フィルタは配列であり、column-keyには以下の項目があらかじめ定義されています

ここで定義するのは aStatus で、コンソールに出力されるフィルターは次のとおりです。

ここで、aStatus はフィルターに対応する値です

すべてを選択するかリセットすると、filters.aStatus は空の配列になります。

表のページネーションではすべての問題をフィルタリングすることはできませんが、解決されます。