Vue开发给iView的Table组件添加自定义表头筛选

效果图:

iview的默认table组件不支持 表头输入框筛选，官方地址
此处默认您有了一定的vue开发基础。
套用iview官方的例子：

//显示表格的例子
<template>
  <Table border :columns="columns7" :data="data6"></Table>
</template>
<script>
import { Table ,Button,Icon,Modal} from "iview";
import Vue from "vue";
export default {
  components: {
    Table
  },
  data() {
    return {
      columns7: [
        {
          title: "Name",
          key: "name",
          //使用render函数自定义列显示效果：文本加粗
          render: (h, params) => {
            return h("div", [//使用render渲染一个div标签
              h(Icon, {//使用render渲染一个iview的组件
                props: {//传递参数
                  type: "person"
                }
              }),
              h("strong", params.row.name)//文字加粗
            ]);
          }
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [//渲染一个div标签
              h(
                Button,//在div标签下渲染一个iview组件
                {
                  props: {//传递参数
                    type: "primary",
                    size: "small"
                  },
                  style: {//设置样式
                    marginRight: "5px"
                  },
                  on: {//监听$emit事件
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "View"
              ),
              h(
                Button,
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "Delete"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park"
        }
      ]
    };
  },
  methods: {
    show(index) {
      this.$Modal.info({
        title: "User Info",
        content: `Name：${this.data6[index].name}
Age：${
          this.data6[index].age
        }
Address：${this.data6[index].address}`
      });
    },
    remove(index) {
      this.data6.splice(index, 1);
    }
  },

  

  mounted(){
      //modal注入
      Vue.prototype.$Modal=Modal;
  }
  
};
</script>

由于table组件表头筛选不支持输入框筛选，那么我们就必须的自己绘制。
思路如下：

• 找到表头所在的节点
• 在表头节点后添加一个自定义筛选的div节点；
• 使用render函数渲染一个下拉输入的单文件组件

 mounted(){
      //modal注入
      Vue.prototype.$Modal=Modal;
      //等dom元素渲染完成之后渲染筛选
      this.$nextTick(()=>{
        this.renderHeaderFilter();
      })
  }

methods:{
 //添加头部筛选
    renderHeaderFilter(){
      let allHeader =document.querySelectorAll(".ivu-table-header .ivu-table-cell");
console.log(allHeader);

      allHeader.forEach((element)=>{
        let createNew=document.createElement("div");
        createNew.classList.add("vue-header-filter");
        element.appendChild(createNew);
        new Vue({
          render(h){
            return h(TableHeaderFilter,{
              props:{}
            })
          }
        }).$mount(createNew);
      })
    }
}

最后实现的效果为:

此文源码案例:欢迎Star