Element ui 表格篩選课蔬，如下：只能篩選當前頁何暇，不能對所有數(shù)據(jù)進行篩選
image.png
這時咋辦呢句柠，其實Element ui 表格有一個事件咸包，filter-change
當表格的篩選條件發(fā)生變化的時候會觸發(fā)該事件桃序，參數(shù)的值是一個對象，對象的 key 是 column 的 columnKey烂瘫，對應的 value 為用戶選擇的篩選條件的數(shù)組媒熊。
注意：這個事件必須添加到table上，column-key屬性需要添加在el-table-column上
看代碼：
<el-button type="primary" @click="search(isCredit)">查詢</el-button>
<el-table :data="tableData" size="small" @filter-change="search">
<el-table-column label="交易時間">
<template slot-scope="scope">{{scope.row.created||'-'}}</template>
</el-table-column>
<el-table-column
prop="is_credit"
label="篩選依據(jù)"
:filters="[ { text: '已完成', value: 1 }, { text:'未完成', value: 0 }]"
column-key="is_credit"
:filter-multiple="false"
>
<template slot-scope="scope">
<span v-if="scope.row.is_credit==1">已完成</span>
<span v-if="scope.row.is_credit==0">未完成</span>
</template>
</el-table-column>
</el-table>
<script>
export default {
methods:{
search(val) {
// 這里可以寫請求后臺的方法坟比，通過請求后臺芦鳍，展示對應數(shù)據(jù)
console.log('篩選依據(jù)',val['is_credit'])
}
}
}
</script>
