el-table/elementui 表格组件实现每一列的筛选（两种方法）

大家好呀，珊妹儿最近更新的有点慢了，是因为最近疏于学习，工作也是没接触到一些新的技术，但近期由于工作使用了el-table组件，需求又有个列的筛选，鉴于项目前期使用的jqGrid,大家都知道，这个插件想要实现列的筛选很容易，因为它自己封装好了，直接可以用，但是我们的新功能使用了vue，所以选择了el-table。

        大家应该都知道官网上的筛选，只提供了类似下拉框多选的筛选，如果这一列是日期的话，我们希望是筛选的时候选择的是日期呢，又或者是input框呢？下面看下图就明白了：

 text类型----需要用el-input

date类型----需要用el-date-picker

select类型---需要用el-select

方法一：

珊妹儿我是这样做的，首先在定义表格列的时候定义每一列的类型(例如type="input")，表格里无非就是三种类型：input,date,select,然后根据官网提供了个方法：render-header,这个里面可以自己定义显示什么，代码如下：

renderHeader(h, { column, $index }) 
      const coltype = column.type;
      if (coltype == "select") {
        return [
          column.label,
          h(
            "el-select",
            {
              on: {
                input: (value) => {
                  //这个是下拉框的事件
                    this.$set(this.filterinput, column.property, value);
                },
              },
              props: { //这里是el-select的属性
                value: this.filterinput[column.property], //文字框的内容取决于这个value，如果value不存在，会报错
                clearable: true,
              },
            },
            [
              columndata.options.map((item) => { //columndata这个是自己的全局
                return h("el-option", {
                  props: {
                    value: item.value,
                    label: item.label,
                  },
                });
              }),
            ]
          ),
        ];
      } else if (coltype == "date") {
        return [
          column.label,
          h("el-date-picker", {
            on: {
              input: (value) => {
                //随着下拉框的不同，文字框里的内容在边
                this.$set(this.filterinput, column.property, value);
              },
            },
            props: {
              value: this.filterinput[column.property],
              clearable: true,
              format: "yyyyMMdd",
              "value-format": "yyyy/MM/dd",
              type: "daterange",
              "range-separator": "至",
              "start-placeholder": "开始日期",
              "end-placeholder": "结束日期",
            },
          }),
        ];
      } else {
        return [
          column.label,
          h("el-input", {
            on: {
              input: (value) => {
                //这个是input每次改变值的事件
                this.$set(this.filterinput, column.property, value);
              },
              change: () => {
                //这个是input改变值后enter事件
                this.onFilterChange();
              },
            },
            props: {
              value: this.filterinput[column.property],
              placeholder: "请输入",
              clearable: true,
            },
          }),
        ];
      }
    },

方法二：

使用方法一的时候，浏览器下面会提示建议使用scoped-slot，方法二就是使用scoped-slot实现，但是目前珊妹遇到个问题，就是如果表格的列信息是动态的，循环出来的列，那么表头也会是动态渲染的，这就导致获取到的每个表头筛选的内容并没有getter/setter属性，会导致粘贴不到表头筛选框中，el-input的输入也不会及时响应，如果有大佬可以解决这个问题，还望提供解决方案

具体代码如下：

<el-table-column
        v-for="(column, index) in columns"
        :key="column.name"
        :prop="column.prop"
        :label="column.label"
        :show-overflow-tooltip="true"
        scoped-slot
      >
      <template slot="header">
          <span>{{column.label}}</span>
          <el-select
            v-if="column.type == 'select'"
            placeholder="请选择"
            clearable
            v-model="filterinput[column.prop]"
            @change="handleTableColumnInputChange()"
          >
            <el-option
              v-for="item in column.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
           <el-date-picker
            v-else-if="column.type == 'date'"
            type="daterange"
            v-model="filterinput[column.prop]"
            style="width: 100%"
            placeholder="选择日期"
            format="yyyy/MM/dd"
            value-format="yyyy/MM/dd"
            clearable
            range-separator= "至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleTableColumnInputChange()"
          >
          </el-date-picker>
          <el-input
            v-else-if="column.type == 'input'"
            size="small"
            clearable
            @change="handleTableColumnInputChange()"
            v-model="filterinput[column.prop]"
          ></el-input>
      </template>
        <template slot-scope="scope">
            <span>{{scope.row[column.prop]}}</span>
        </template>
      </el-table-column>

重点注意!!!!!：定义列的时候记得一定要定义个type属性，属性值就是input/date/select