iview中表格的筛选

默认的筛选只支持筛选列表，现需求为支持文本框输入筛选。采用的方式为通过renderHeader方法去自定义表头显示内容

效果如图：

image.png

代码如下：

emailSearch = ""
showHidden = false;
columns= [
    {
      title: "项目成员",
      key: "email",
      align: "left",
      width: 150,
      renderHeader: (h, params) => {
        return h(
          "Dropdown",
          {
            props: {
              trigger: "custom",
              visible: this.showHidden
            },
          },
          [
            h("span", "项目成员"),
            h("Icon", {
              props: {
                type: "ios-funnel",
              },
              style: {
                marginLeft: "5px",
                fontSize: "14px",
                color: "#c5c8ce",
                cursor: "pointer",
              },
              on: {
                click: () => {
                  this.filterOn();
                },
              },
            }),
            h(
              "DropdownMenu",
              {
                slot: "list",
               },
              [
                h("DropdownItem", [
                  h("Input", {
                    props: {
                      placeholder: "请输入内容",
                      value: this.emailSearch
                    },
                    on: {
                      'input': (event) => {
                        this.setInput(event)
                      }
                    }
                  }),
                  h(
                    "div",
                    {
                      style: {
                        textAlign: "center",
                        marginTop: "10px",
                      },
                    },
                    [
                      h(
                        "Button",
                        {
                          props: {
                            type: "primary",
                            size: "small",
                          },
                          style: {
                            fontSize: "14px",
                            marginTop: "10px",
                            marginRight: "10px",
                          },
                          on: {
                            click: () => {
                              this.queryRankSearch();
                            },
                          },
                        },
                        "筛选"
                      ),
                      h(
                        "Button",
                        {
                          props: {
                            size: "small",
                          },
                          style: {
                            fontSize: "14px",
                            marginTop: "10px",
                          },
                          on: {
                            click: () => {
                              this.queryRankReset();
                            },
                          },
                        },
                        "重置"
                      ),
                    ]
                  ),
                ]),
              ]
            ),
          ]
        );
      },
    },
     
  ];


@Watch("showHidden")
  showHiddenChange(val) {
    let newValue = {
      title: "项目成员",
      key: "email",
      align: "left",
      width: 150,
      renderHeader: (h, params) => {
        // console.log('renderHeader2 showHidden',this.showHidden) 
        return h(
          "Dropdown",
          {
            props: {
              trigger: "custom",
              visible: this.showHidden
            },
          },
          [
            h("span", "项目成员"),
            h("Icon", {
              props: {
                type: "ios-funnel",
              },
              style: {
                marginLeft: "5px",
                fontSize: "14px",
                color: "#c5c8ce",
                cursor: "pointer",
              },
              on: {
                click: () => {
                  this.filterOn();
                },
              },
            }),
            h(
              "DropdownMenu",
              {
                slot: "list",
                attrs: {
                  id: "queryFailureFilterDrop",
                },
              },
              [
                h("DropdownItem", [
                  h("Input", {
                    props: {
                      placeholder: "请输入内容",
                      value: this.emailSearch
                    },
                    attrs: {
                      id: "queryFailureFilterInput",
                    },
                    on: {
                      'input': (event) => {
                        this.setInput(event)
                      }
                    }
                  }),
                  h(
                    "div",
                    {
                      style: {
                        textAlign: "center",
                        marginTop: "10px",
                      },
                    },
                    [
                      h(
                        "Button",
                        {
                          props: {
                            type: "primary",
                            size: "small",
                          },
                          style: {
                            fontSize: "14px",
                            marginTop: "10px",
                            marginRight: "10px",
                          },
                          on: {
                            click: () => {
                              this.queryRankSearch();
                            },
                          },
                        },
                        "筛选"
                      ),
                      h(
                        "Button",
                        {
                          props: {
                            size: "small",
                          },
                          style: {
                            fontSize: "14px",
                            marginTop: "10px",
                          },
                          on: {
                            click: () => {
                              this.queryRankReset();
                            },
                          },
                        },
                        "重置"
                      ),
                    ]
                  ),
                ]),
              ]
            ),
          ]
        );

      },
    }
    this.$set(this.columns, 0, newValue)
  }


filterOn() {
    this.showHidden = !this.showHidden;
 }
setInput(event) {
    this.emailSearch = event
  }
// 点击页面事件 隐藏需要隐藏的区域
  HiddenClick() {
    this.showHidden = false
  }
  queryRankSearch() { 
    this.HiddenClick()
   // 查询列表
  }
  queryRankReset() { 
    this.emailSearch = ''
    this.HiddenClick()
    // 查询列表
  }

showHidden变化的时候，并不会自动调用renderHeader函数。所以采取的方式是监听showHidden然后重新定义columns。columns改变会触发renderHeader。

为什么showHidden变化的时候，不会自动调用renderHeader函数？

原因是showHidden和columns都为data里面的数据，初始化columns的时候showHidden还不是响应式的。所以还有一种写法，那就是columns里面的内容可以在mounted的时候定义。这样一来，在mounted中showHidden就是响应式的了，应该也能达到效果的。