Element ui 表格筛选

2019-12-17  本文已影响0人  青争小台

Element ui 表格筛选,如下:只能筛选当前页,不能对所有数据进行筛选


image.png

这时咋办呢,其实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>
上一篇下一篇

猜你喜欢

热点阅读