使用element-ui table组件的筛选功能的一个小记录

使用自定义模板和筛选功能，使用filter-change 事件，有多个筛选时 ，需要加上column-key，column 的 key标识是哪个 column 的筛选条件，当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。实现如下图：

• 实现代码如下，给column-key加上key值用来判断不同的筛选

                  <el-table-column
                            prop="entrustStatus"
                            label="激活"
                            column-key='entrustStatus'
                            :filters=entrustStatusData
                            :filter-multiple="false"
                            filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <span>{{ scope.row.entrustStatus | entrustStatusFilter }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="rewardStatus"
                            label="状态"
                            width="200px"
                            :filters=rewardStatusData
                            column-key='rewardStatus'
                            filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <span :class="scope.row.rewardStatus  | rewardStatusFilter('class') "></span>
                            <span>{{ scope.row.rewardStatus | rewardStatusFilter }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="gpsStatus"
                            label="GPS"
                            column-key='gpsStatus'
                            :filters=gpsStatusData
                            :filter-multiple="false"
                            filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <span :class="scope.row.gpsStatus === 1 ?'iconBlue':'iconGray'"></span>
                            <span>{{ scope.row.gpsStatus === 1 ? '有效' : '无效'}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="isProviderGpsUserful"
                            label="贴G"
                            column-key='isProviderGpsUserful'
                            :filters=isProviderGpsUserfulData
                            :filter-multiple="false"
                            filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <span :class="scope.row.isProviderGpsUserful === 2 ?'iconBlue':'iconGray'"></span>
                            <span>{{ scope.row.isProviderGpsUserful === 2 ? '有效' : '无效'}}</span>
                        </template>
                    </el-table-column>

最终实现筛选功能，还有要加上prop属性，最后还需要提醒大家一点，本篇文章中的例子仅供参考学习，切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。