請注明出處: https://blog.csdn.net/qq_23179075/article/details/79939244
[圖片上傳失敗...(image-9342de-1523682905237)]
[圖片上傳失敗...(image-da4ca4-1523682905237)]
[圖片上傳失敗...(image-165b55-1523682905237)]
[圖片上傳失敗...(image-67d26c-1523682905237)]
[圖片上傳失敗...(image-92ce57-1523682905237)]
[圖片上傳失敗...(image-c8f980-1523682905237)]
這里寫圖片描述
博主是個(gè)前端小白,不會寫
CSS 樣式, 所以在做公司項(xiàng)目的時(shí)候, 頁面都是用的第三方 UI 庫. 隨著前端 Vue.js 崛起, 支持 Vue2.0 的前端 UI 庫也非常多. 比如下面這幾個(gè).
- Muse-UI
- Element UI
- iView
目前公司做后臺采用的是第三個(gè) iView , 可是在用到這個(gè)庫的 Table 組件的時(shí)候發(fā)現(xiàn)他的表格搜索過濾不完整, 用起來也不好用. 所以博主試著在它的 Tab 基礎(chǔ)上做一些擴(kuò)展. 最后的效果如下:
filterTable.gif
支持 Input輸入框 和 Select下拉框兩種表格篩選方式.
使用
模板
<filter-table @load="loadData" //過濾觸發(fā)事件
:data="users"
:columns="tableColumns"
:search="search" //過濾的條件
>
</filter-table>
列描述數(shù)據(jù)對象
tableColumns: [
{
title: '用戶名',
key: 'username',
filter: {
type: 'Input' //輸入框過濾
}
},
{
title: '狀態(tài)',
key: 'status',
filter: {
type: 'Select',//下拉框過濾
option: userStatus //下拉框選項(xiàng)數(shù)據(jù)對象
}
]
下拉框選項(xiàng)數(shù)據(jù)格式
const userStatus = {
0: {
value: 0,
name: '全部'
},
1: {
value: 1,
name: '已鎖定',
color: 'red'
},
2: {
value: 2,
name: '正常',
color: 'green'
},
};
Github源碼地址
[圖片上傳失敗...(image-e3f9e-1523682905237)]
