el-table表头加入筛选功能

Monop

已于 2022-04-26 11:25:44 修改

阅读量6.8k

点赞数 2

文章标签： vue.js elementui javascript

于 2022-04-26 10:06:03 首次发布

本文链接：https://blog.csdn.net/m0_53251830/article/details/124419947

版权

该博客介绍了如何在Vue.js和ElementUI的el-table组件中添加筛选功能。通过使用el-popover作为过滤组件，并利用scoped-slot header进行模板渲染，避免了在:render-header中可能产生的代码警告。用户可以输入筛选条件，也可从过滤后的数据中选择，所选值会回填到输入框。推荐使用scoped-slot header，因为其更易于使用。

摘要由CSDN通过智能技术生成

可以通过输入框输入，也可以通过遍历过滤出来的数据进行选择，选择的单选值回填到输入框中，

表格组件：

<template>
  <el-table :data="formTable.tableData">
    <el-table-column :prop="item1.paramName" v-for="item1 in tableHeader" :key="item1.paramName" :label="item1.title" sortable>
        <!-- 表头部分数据【开始】 -->
        <template slot="header" scope-scope="scope">
            <!-- 表头字段名字 -->
            <span class="starName">
                {
  { item1.title }}
            </span>
            <!-- 表头过滤组件 -->
            <thSelectHeader
                :property="item1.paramName"
                :checkList="checkList"
                @selectChange="selectChange"
                @resetChange="resetChange"
            ></thSelectHeader>
        </template>
        <!-- 表头部分数据【结束】 -->
        <!-- 表体部分数据【开始】 -->
        <