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}<br>Age：${
          this.data6[index].age
        }<br>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