element ui筛选表头加搜索

Question

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

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

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

以下是我的代码

```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的表格中实现自定义筛选功能。Element UI提供了一些内置的筛选功能，但是当内置功能无法满足需求时，我们可以通过一些自定义的方法来实现更复杂的筛选逻辑。

解决方案

1. 使用filter-method属性：

   • 您可以在列定义中使用filter-method属性来启用筛选功能。filter-method是一个方法，它接受三个参数：value（筛选的值），row（当前行的数据对象），和column（当前列的数据）。

2. 自定义筛选组件：

   • 如果内置筛选器不够用，您可以创建自定义的筛选组件。在Element UI中，您可以使用<template slot="header" slot-scope="scope">来自定义表头内容。

3. 动态生成筛选条件：

   • 您可以使用Vue的v-for指令来根据条件动态生成筛选输入框。例如，您可以在表头插槽中使用v-for来循环渲染筛选条件。

4. 处理类名重复问题：

   • 如果类名重复，您可能需要检查Element UI的文档来找到正确的类名，或者使用其他方法（如绑定唯一的ref或key）来区分不同的筛选条件。

5. 事件处理：

   • 对于筛选项弹出不触发点击事件的问题，您可能需要检查是否有JavaScript错误，或者使用Vue的事件修饰符（如.stop）来阻止事件冒泡。

示例代码

以下是一个简单的示例，展示如何在Element UI表格中使用filter-method属性和自定义筛选组件：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" filter-placement="bottom-end" :filters="[{ text: '2016-05-01', value: '2016-05-01' }]" filter-method="filterDate"></el-table-column>
    <!-- 其他列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ]
    };
  },
  methods: {
    filterDate(value, row) {
      return row.date === value;
    }
  }
};
</script>

在这个示例中，我们为日期列添加了一个筛选器，当用户选择一个日期时，filterDate方法会被调用，根据传入的值和当前行的数据来决定是否显示这行数据。

希望这些信息对您有所帮助！如果您需要更详细的帮助或示例，请随时告诉我。