elment Ui 表格 表头 增加筛选功能

<div id="aa" class="aa">
                <div class="dhdiv">明细信息
                </div>
                <hd-table :data="tableData" v-bind="$attrs" select-mode="none">
                    <el-table-column  label="PO" prop="po" :filters="poFilters"
                                      :filter-method="filterHandler">
                    </el-table-column>
                    <el-table-column  label="颜色" prop="color" :filters="colorFilters"
                                      :filter-method="filterHandler">
                    </el-table-column>
                    <el-table-column  label="尺码" prop="size" align="center" width="160px"  :filters="sizeFilters"
                                      :filter-method="filterHandler">
                    </el-table-column>
                    <el-table-column  label="订单数" prop="quantity" align="center" width="160px">
                    </el-table-column>
                    <el-table-column  label="可出货数" prop="canShipmentNumber">
                        <template slot-scope="scope">
                            <el-input  v-model.trim="scope.row.canShipmentNumber" disabled
                                       placeholder="请输入" @blur="$forceUpdate()"
                                       size="small" />
                        </template>
                    </el-table-column>
                    <el-table-column  label="出货数" prop="shipmentNumber">
                        <template slot-scope="scope">
                            <el-input-number type="number"  :min="0" :max="scope.row.quantity"
                                             v-model.trim="scope.row.shipmentNumber" @change="changeShipmentNumber(scope.row)"
                                             size="small" />
                        </template>
                    </el-table-column>
                    <el-table-column  label="合格数" prop="passQty">
                        <template slot-scope="scope">
                            <el-input-number type="number" :min="0" v-model.trim="scope.row.passQty"
                                             placeholder="请输入" @change="changePassQty(scope.row)"
                                             size="small" />
                        </template>
                    </el-table-column>
                    <!--<el-table-column label="操作" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-delete" plain
                                @click.stop="onClickDelete(scope.$index)"></el-button>
                        </template>
                    </el-table-column>-->

                </hd-table>            </div>

　　

computed: {
        colorFilters(){
            return Array.from(new Set(this.tableData.map(e=>e.color))).map(f=>{ return {text: f, value: f}});
        },
        sizeFilters(){
            return Array.from(new Set(this.tableData.map(e=>e.size))).map(f=>{ return {text: f, value: f}});
        },
        poFilters(){
            return Array.from(new Set(this.tableData.map(e=>e.po))).map(f=>{ return {text: f, value: f}});
        }
    },

　　

methods:{
    filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
    },
}

　　

关键步骤  :filters="poFilters"  :filter-method="filterHandler"