Element ui 表格筛选,如下:只能筛选当前页,不能对所有数据进行筛选
这时咋办呢,其实Element ui 表格有一个事件,filter-change
当表格的筛选条件发生变化的时候会触发该事件,参数的值是一个对象,对象的 key 是 column 的 columnKey,对应的 value 为用户选择的筛选条件的数组。
注意:这个事件必须添加到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="筛选依据"
: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) {
// 这里可以写请求后台的方法,通过请求后台,展示对应数据
console.log('筛选依据',val['is_credit'])
}
}
}
</script>