Vue列頭過濾是一項非常實用的功能，它能夠讓我們對表格進行非常精準的篩選，使得我們可以快速地找到需要的數據，提高工作效率。

首先，讓我們來看看如何完成一個簡單的列頭過濾。在Vue中，我們可以使用computed屬性來實現。在表格中，我們需要對需要過濾的列進行標識，比如給列頭添加一個“filterable”屬性。然后，我們就可以在computed中通過過濾方法來實現篩選。比如，在下面的代碼中，我們可以根據輸入的關鍵字來過濾name列：

computed: {
filteredData: function () {
var keyword = this.keyword.trim();
if (keyword === '') {
return this.data;
} else {
return this.data.filter(function (item) {
return item.name.toLowerCase().indexOf(keyword.toLowerCase()) !== -1;
});
}
}
}

在上面的代碼中，我們首先獲取輸入的關鍵字，然后判斷關鍵字是否為空。如果是空的話，我們就直接返回原始數據。否則，我們就對數據進行過濾，返回符合條件的數據。

在實際開發中，我們也可以用Vue提供的“過濾器”來簡化操作。我們可以通過“Vue.filter()”方法來定義一個過濾器，并在模板中使用它。比如，在下面的代碼中，我們定義了一個名為“filterByName”的過濾器，用于篩選name列：

Vue.filter('filterByName', function (value, keyword) {
if (!keyword) {
return value;
} else {
keyword = keyword.trim().toLowerCase();
return value.filter(function (item) {
return item.name.toLowerCase().indexOf(keyword) !== -1;
});
}
});

在定義好過濾器之后，我們就可以在模板中使用它了。比如，在下面的代碼中，我們在數據綁定的過程中，使用了“filterByName”過濾器對數據進行了篩選：

{{ item.id }}{{ item.name }}{{ item.age }}

除了單列過濾外，Vue還支持多列過濾。在實現多列過濾時，我們需要使用多個過濾條件，并且將這些條件進行組合。比如，我們可以使用下面的代碼來實現對name和age列的多列過濾：

computed: {
filteredData: function () {
var keyword = this.keyword.trim();
if (keyword === '') {
return this.data;
} else {
return this.data.filter(function (item) {
return item.name.toLowerCase().indexOf(keyword.toLowerCase()) !== -1 ||
item.age.toString().indexOf(keyword) !== -1;
});
}
}
}

在上面的代碼中，當關鍵字不為空時，我們對數據進行了過濾。對于每一條數據，我們都判斷了它的name和age列是否包含了關鍵字。如果包含了，就將該數據加入到結果集中。

最后，需要注意的是，在大規模數據下，對整個數據集進行遍歷和篩選可能會非常耗時，影響性能。因此，在實際開發中，我們可以使用服務器端的分頁和過濾，將數據分頁并篩選后再返回給客戶端。這樣可以避免對整個數據集進行遍歷和計算，提高查詢效率。