element ui筛选表头加搜索

Question

各位DaDaLao，是这样的，我想在element ui 的表格表头加筛选功能，但是项目上筛选条件有点多，个人想加一个筛选条件，奈何XiaoXiaoDi能力有限，希望DaDaLao有没有什么好办法在原来基础上加；

原本想通过类名出添加的，奈何出现的类名都是一样的，加上表头那个小三角点中弹出筛选项不触发 点击表头事件；此时我就不知道給那个类先加输入框了

再如图所示，我想实现的效果，再输入框能过滤我的筛选条件

以下是我的代码

```c#
```c#
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}
<div class="topPanel" id="app">
    <div class="toolbar">
        <div class="btn-group">
            <el-button onclick="$.reload()" class="glyphicon glyphicon-refresh" style="margin-top:6px" size="small"></el-button>
        </div>
        <div class="operate">
            <ul class="nav nav-pills">
                <li class="first"><span>已选中1项</span></li>
                <li><a id="NF-edit" authorize="yes" @@click="btn_edit"><i class="fa fa-pencil-square-o"></i>编辑</a></li>
                <li class="split"></li>
                <li><a id="NF-Details" authorize="yes" @@click="btn_details"><i class="fa fa-search-plus"></i>查看</a></li>
            </ul>
            <a href="javascript:;" class="close"></a>
        </div>
        <script>$('.toolbar').authorizeButton()</script>
    </div>
    <div class="search">
        <table>
            <tr>
                <td>
                    <div class="input-group">
                        <el-tag effect="plain" type="info">条件查询</el-tag>
                    </div>
                </td>
                <td>
                    <div class="input-group">
                        <el-input v-model="Search" size="small"></el-input>
                    </div>
                </td>
                @*<td>
                    <div class="input-group">
                        <el-button icon="el-icon-search" size="small"></el-button>
                    </div>
                </td>*@
            </tr>
        </table>
    </div>
    <div class="gridPanel">
        <template>
            <el-table :data="tableData"
                      height=90vh
                      size="mini"
                      @@row-click="RecipeListClickItme"
                      @@filter-change="filterChange"
                      @@header-click="HeaderClick"
                      highlight-current-row
                      border
                      style="width: 100%;">
                <el-table-column type="index"
                                 width="50">
                    <template slot-scope="scope">
                        {{(currentPage-1)*pageSize+scope.$index+1}}
                    </template>
                </el-table-column>
                @*<el-table-column prop="AreaName"
                         label="区域名称"
                         width="80">
        </el-table-column>*@
            <el-table-column prop="EqpTypeName"
                             column-key="EqpTypeName"
                             label="设备类型"
                             width="100"
                             :filters="GroupTableHandler(SourceData,'EqpTypeName')"
                             :filter-method="filterHandler">
            </el-table-column>
                <el-table-column prop="EqpName"
                                 column-key="EqpName"
                                 label="设备名称"
                                 :filters="GroupTableHandler(SourceData,'EqpName')"
                                 :filter-method="filterHandler">
                </el-table-column>
                <el-table-column prop="RecipeName"
                                 label="配方名称"
                                 width="240">
                </el-table-column>
                <el-table-column prop="RecipeStatus"
                                 column-key="RecipeStatus"
                                 label="状态"
                                 width="120"
                                 :filters="GroupTableHandler(SourceData,'RecipeStatus')"
                                 :filter-method="filterHandler">
                </el-table-column>
                <el-table-column prop="RecipeVersion"
                                 label="配方版本"
                                 width="70">
                </el-table-column>
                <el-table-column prop="IsActive" 
                                 column-key="IsActive"
                                 width="85"
                                 label="签核状态"
                                 :filters="GroupTableHandler(SourceData,'IsActive')"
                                 :filter-method="filterHandler">
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper">
                            <el-tag :type="scope.row.IsActive==true?'success':'danger'">
                                {{scope.row.IsActive==true?'Yes':'No'}}
                            </el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="F_CreatorUserId"
                                 label="创建人员">
                    <template slot-scope="scope">
                        {{GetUserName(scope.row.F_CreatorUserId)}}
                    </template>
                </el-table-column>
                <el-table-column prop="F_CreatorTime"
                                 label="创建时间">
                </el-table-column>
                <el-table-column prop="F_LastModifyUserId"
                                 label="修改人员">
                    <template slot-scope="scope">
                        {{GetUserName(scope.row.F_CreatorUserId)}}
                    </template>
                </el-table-column>
                <el-table-column prop="F_LastModifyTime"
                                 label="修改时间">
                </el-table-column>
                <el-table-column prop="Description"
                                 label="描述">
                </el-table-column>
            </el-table>
        </template>
        <el-pagination @@size-change="handleSizeChange"
                       @@current-change="PageCountItmeClickEvent"
                       :current-page="currentPage"
                       :page-sizes="[50,100,200]"
                       :page-size="pageSize"
                       :total="total"
                       layout="total, sizes, prev, pager, next, jumper"
                       style="margin-top:5px;">
        </el-pagination>
    </div>
</div>
<script type="module">
    import vue from '/Content/js/VueJS/VueMethod.js?RMS_1.0';
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                SourceData: [],
                tableData: [],
                FilterConfig: {
                    Count:0,
                },
                Search: null,
                currentRow: null,
                currentPage: 1, // 当前页
                pageSize: 50, // 每页显示条数
                total: 0, // 总条目数
            }
        },
        watch: {
            Search: function (newval, oldval) {
                this.currentPage = 1;
                this.GetTable();
            }
        },
        beforeMount() {
            vue.methods.FloatBox();
            this.GetTable();
        },
        methods: {
            GetTable() {
                vue.Axios.Axiosfunction({
                    object: app,
                    RequestType: "get",
                    url: '/SystemManage/RmsRecipe/GetListJson',
                    success: function (val) {
                        app.SourceData = val;
                        app.UpdatePage();
                    },
                    error: function (vals) {
                        vue.methods.MessageError(app, vals, 5000);
                    }
                });
            },
            UpdatePage() {
                if (this.FilterConfig.Count > 0) {
                    let data = JSON.parse(JSON.stringify(this.FilterConfig));
                    for (var itme in data) {
                        if (data[itme].length == 0) {
 
                            delete data[itme];
                        }
                    }
                    delete data.Count;
                    let tebale = multiConditionFilter(app.SourceData, data).filter(obj =>
                        !this.Search ||
                        (obj.EqpTypeName && obj.EqpTypeName.toString().toLowerCase().includes(this.Search.toLowerCase())) ||
                        (obj.EqpName && obj.EqpName.toString().toLowerCase().includes(this.Search.toLowerCase())) ||
                        (obj.RecipeName && obj.RecipeName.toString().toLowerCase().includes(this.Search.toLowerCase()))
                    );
                    app.tableData = tebale.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
                    app.total = tebale.length;
                    return;
                }
                let Data = app.SourceData.filter(obj =>
                    !this.Search ||
                    (obj.EqpTypeName && obj.EqpTypeName.toString().toLowerCase().includes(this.Search.toLowerCase())) ||
                    (obj.EqpName && obj.EqpName.toString().toLowerCase().includes(this.Search.toLowerCase())) ||
                    (obj.RecipeName && obj.RecipeName.toString().toLowerCase().includes(this.Search.toLowerCase()))
                );
                app.tableData = Data.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
                app.total = Data.length;
            },
            RecipeListClickItme(row) {
                $(".operate").animate({ "left": '0%' }, 200);
                $("#NF-edit").show();
                if (row.RecipeStatus=="Delete") {
                    $("#NF-edit").hide();
                }
                this.currentRow = row;
            },
            btn_edit() {
                if (!app.currentRow.F_Id) {
                    vue.methods.MessageError(app, "你还没有选中呢，请选中后再试一下吧。", 5000);
                    return;
                } 
                $.modalOpen({
                    id: "Form",
                    title: "程序配置编辑",
                    url: "/SystemManage/RmsRecipeECM/Form?keyValue=" + app.currentRow.F_Id,
                    width: $(window).width() + "px",
                    height: $(window).height() + "px",
                    btn: null,
                    callBack: function (iframeId) {
                    }
                });
            },
            btn_delete() {
                if (!app.currentRow.F_Id) {
                    vue.methods.MessageError(app, "你还没有选中呢，请选中后再试一下吧。", 5000);
                    return;
                }
                $.deleteForm({
                    url: "/SystemManage/RmsRecipe/DeleteForm",
                    param: { keyValue: app.currentRow.F_Id },
                    success: function () {
                        app.GetTable();
                    }
                });
            },
            btn_details() {
                if (!app.currentRow.F_Id) {
                    vue.methods.MessageError(app, "你还没有选中呢，请选中后再试一下吧。", 5000);
                    return;
                }
                $.modalOpen({
                    id: "Details",
                    title: "查看程序详情",
                    url: "/SystemManage/RmsRecipeECM/Details?keyValue=" + app.currentRow.F_Id,
                    width: $(window).width() + "px",
                    height: $(window).height() + "px",
                    btn: null
                });
            },
            GetUserName: function (Id) {
                return top.clients.user[Id] != null ? top.clients.user[Id].realname : Id;
            },
            // 页面大小改变时触发
            handleSizeChange(val) {
                this.pageSize = val;
                this.GetTable();
                // 可以在这里进行请求数据的操作
            },
            // 当前页改变时触发
            PageCountItmeClickEvent(val) {
                this.currentPage = val;
                this.GetTable();
            },
            GroupTableHandler(data, GroupName) {
                if (data.length == 0) {
                    return [];
                }
                let GroupNameList = [];
                for (var i = 0; i < data.length; i++) {
                    if (!GroupNameList.find(t => t.value == data[i][GroupName])) {
                        GroupNameList.push({
                            text: data[i][GroupName],
                            value: data[i][GroupName]
                        })
                    }
                }
                console.log(GroupNameList)
                return GroupNameList;
            },
            HeaderClick(column, event) {
                console.log(column)
                console.log(event)
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            filterChange(filter) {
                for (var Itme in filter) {
                    if (!this.FilterConfig[Itme] && filter[Itme].length > 0) {
                        this.FilterConfig.Count++;
                    }
                    else if (this.FilterConfig[Itme].length == 0 && filter[Itme].length > 0) {
                        this.FilterConfig.Count++;
                    }
                    else if (filter[Itme].length == 0) {
                        if (this.FilterConfig[Itme].length > 0) {
                            this.FilterConfig.Count--;
                        }
                    }
                    this.FilterConfig[Itme] = filter[Itme];
                }
                this.UpdatePage();
            },
        }
 
    });
 
</script>
 

```

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

您好！根据您提供的代码和描述，您希望在Element UI的表格中实现表头筛选功能，并且希望在输入框中输入内容后能够过滤出相应的筛选条件。下面是一些建议和代码示例，帮助您实现这些功能：

1. 实现表头筛选功能：

   • 在el-table-column中使用:filters属性来定义筛选条件，filter-method属性指定筛选方法。

2. 筛选条件类名问题：

   • 您可以通过Vue的ref属性给每个筛选输入框添加一个唯一的引用，然后在filter-change事件中通过this.$refs获取到对应的输入框，并设置筛选条件。

3. 实现输入框过滤效果：

   • 在el-input组件中使用v-model绑定一个数据属性，例如v-model="Search"。然后在watch属性中监听Search的变化，当它变化时，调用UpdatePage方法重新过滤数据。

4. 代码实现：

   • 您提供的代码已经包含了大部分需要的功能，但可能需要添加一些筛选条件的定义和筛选方法的实现。

以下是一些代码示例，您可以根据这些示例调整您的代码：

// 在data函数中定义筛选条件
data() {
    return {
        // ...其他数据
        search: '', // 用于输入框绑定的搜索关键词
        filters: { // 定义筛选条件对象
            EqupTypeName: [], // 筛选条件数组
            // 其他筛选条件...
        }
    };
},

// 在methods中定义筛选方法
methods: {
    // 筛选方法，根据筛选条件过滤数据
    filterData() {
        const filters = this.filters;
        return this.SourceData.filter(item => {
            for (let key in filters) {
                if (filters[key].length && !filters[key].includes(item[key])) {
                    return false;
                }
            }
            return true;
        });
    },
    // 更新页面数据
    updatePage() {
        this.tableData = this.filterData().slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
        this.total = this.filterData().length;
    },
    // 监听搜索框变化，重新过滤数据
    handleSearchChange(val) {
        this.Search = val;
        this.updatePage();
    },
    // 筛选条件变化时的事件处理
    filterChange(filters) {
        for (let key in filters) {
            this.filters[key] = filters[key];
        }
        this.updatePage();
    },
    // ...其他方法
},

// 在el-table-column中使用filter-method属性指定筛选方法
<el-table-column prop="EqpTypeName"
                 label="设备类型"
                 :filters="filters.EqpTypeName"
                 :filter-method="filterHandler">
</el-table-column>

// 定义filterHandler方法
filterHandler(value, row, column) {
    const property = column['property'];
    return row[property] === value;
},

// 在el-input中使用v-model绑定搜索框
<el-input v-model="search" @input="handleSearchChange" size="small"></el-input>

请注意，上述代码只是一个示例，您可能需要根据您的具体需求进行调整。希望这些建议和代码示例能够帮助您解决问题。如果还有其他问题，欢迎继续提问。