el-table-column filterb 文本相關(guān)參考內(nèi)容

el-table-columnfilterb文本El-Table-Column組件是餓了么前端團(tuán)隊(duì)開發(fā)的一種基于Vue.js的表格列組件。這個(gè)組件可以幫助我們在Vue.js項(xiàng)目中更加輕便、靈活的處理表格列的數(shù)據(jù)展示、排序、過濾等功能。其中，filterb是這個(gè)組件中不可忽視的重要特性之一，下面我們將對這個(gè)特性進(jìn)行詳細(xì)的解釋。

Whatisfilterb?

在El-Table-Column組件中，filterb是指可以通過用戶自定義的過濾器來對表格列中的數(shù)據(jù)進(jìn)行篩選，從而達(dá)到數(shù)據(jù)過濾的目的。而這個(gè)過濾器可以是一個(gè)函數(shù)，也可以是一個(gè)布爾值等。El-Table-Column組件提供了多種不同的過濾器類型供開發(fā)者選擇，這些類型包括：

1、String:字符串過濾器。

2、Number:數(shù)字過濾器。

3、Boolean:布爾過濾器。

4、Dates:日期時(shí)間過濾器。

為了更好地理解這些過濾器類型的具體含義，我們可以通過以下示例來進(jìn)行演示：

1、字符串過濾器

假設(shè)我們有如下數(shù)據(jù)列表：

```

[

{name:'張三',age:18,gender:'male',tag:'A'},

{name:'李四',age:20,gender:'female',tag:'B'},

{name:'張三豐',age:22,gender:'male',tag:'C'}

]

```

若我們想要對這份數(shù)據(jù)進(jìn)行名稱過濾，只想顯示名字中包含“張三”的數(shù)據(jù)。那么可以使用如下代碼：

```

<el-table-columnprop="name"label="姓名":filters="nameFilters":filter-method="nameFilterHandler"></el-table-column>

```

其中，nameFilters可以是一個(gè)數(shù)組，內(nèi)容如下：

```

[

{text:'張三',value:'張三'},

{text:'李四',value:'李四'},

{text:'張三豐',value:'張三豐'}

]

```

我們可以通過這個(gè)數(shù)組來顯示過濾器的類型，當(dāng)用戶選擇其中的一個(gè)類型后，會觸發(fā)nameFilterHandler函數(shù)，這個(gè)函數(shù)的作用是根據(jù)用戶選擇的過濾器類型來過濾表格列中的數(shù)據(jù)，只保留符合條件的行數(shù)據(jù)。

2、數(shù)字過濾器

數(shù)字過濾器與字符串過濾器的實(shí)現(xiàn)方式類似，只不過過濾的內(nèi)容變成了數(shù)字，如下：

```

<el-table-columnprop="age"label="年齡":filters="ageFilters":filter-method="ageFilterHandler"></el-table-column>

```

其中，ageFilters也是一個(gè)數(shù)組，內(nèi)容如下：

```

[

{text:'18',value:18},

{text:'20',value:20},

{text:'22',value:22}

]

```

3、布爾過濾器

布爾過濾器是一種比較特殊的過濾器類型，它可以直接過濾列中的數(shù)據(jù)是否為“真”或“假”，如下：

```

<el-table-columnprop="gender"label="性別":filters="genderFilters":filter-method="genderFilterHandler"filter-multiple></el-table-column>

```

其中，genderFilters為以下形式的數(shù)組：

```

[

{text:'男',value:true},

{text:'女',value:false}

]

```

4、日期時(shí)間過濾器

日期時(shí)間過濾器是一種比較常見的過濾器類型，在El-Table-Column組件中我們可以很方便地使用它，如下：

```

<el-table-columnprop="created_at"label="創(chuàng)建時(shí)間":filters="createdAtFilters":filter-method="createdAtFilterHandler"></el-table-column>

```

其中，createdAtFilters為以下形式的數(shù)組：

```

[

{text:'今天',value:0},

{text:'昨天',value:-1},

{text:'7天之內(nèi)',value:-7},

{text:'30天之內(nèi)',value:-30},

{text:'90天之內(nèi)',value:-90}

]

```

以上是四種最常見的過濾器類型，但El-Table-Column組件還提供了很多其他類型的過濾器，我們可以在實(shí)際開發(fā)中根據(jù)需要進(jìn)行選擇。

Conclusion

filterb是El-Table-Column組件中的一種非常重要的特性，通過