Skip to content

Commit 3cdd043

Browse files
author
黄书伟
committed
1、支持条件过滤功能 #18 #94 -- 已完成
2、Table 组件回到顶部触发时机，由数据改变时触发更改为分页时触发 -- 已完成 3、Table 组件提供手动回到顶部的方法 `scrollToTop()` -- 已完成 4、Pagination 组件修复当浏览器大小改变，dropdown 错位的问题 #102 -- 已完成
1 parent 8191590 commit 3cdd043

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+2292
-1046
lines changed

‎examples/app.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,18 @@ Vue.component('anchor', anchor);
1919

2020
// product
2121
import '../libs/themes-base/index.css'
22-
import {VTable,VPagination,VCheckbox,VCheckboxGroup} from '../libs/index.js'
22+
import {VTable,VPagination,VCheckbox,VCheckboxGroup,VSelect,VDropdown} from '../libs/index.js'
2323

2424
// dev
2525
/*import '../packages/themes-base/index.css'
26-
import {VTable,VPagination,VCheckbox,VCheckboxGroup} from '../packages/index.js'*/
26+
import {VTable,VPagination,VCheckbox,VCheckboxGroup,VSelect,VDropdown} from '../packages/index.js'*/
2727

2828
Vue.component(VTable.name, VTable)
2929
Vue.component(VPagination.name, VPagination)
3030
Vue.component(VCheckbox.name, VCheckbox)
3131
Vue.component(VCheckboxGroup.name, VCheckboxGroup)
32+
Vue.component(VSelect.name, VSelect)
33+
Vue.component(VDropdown.name, VDropdown)
3234

3335

3436

‎examples/comp/App.vue‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,21 @@
4141
</li>
4242
</ul>
4343

44+
<template v-if="showHide">
45+
<a class="main-wrapper-sidebar-link" href="javascript:javascript:void(0);">内置组件</a>
46+
<ul class="menu-sub">
47+
<li>
48+
<router-link to="/select">Select 选择</router-link>
49+
</li>
50+
<li>
51+
<router-link to="/checkbox">Checkbox 多选</router-link>
52+
</li>
53+
<li>
54+
<router-link to="/dropdown">Dropdown 下拉</router-link>
55+
</li>
56+
</ul>
57+
</template>
58+
4459
</li>
4560
</ul>
4661
</div>
@@ -86,7 +101,8 @@
86101
data(){
87102
return {
88103
showBackTop: false,
89-
catalogData: []
104+
catalogData: [],
105+
showHide:false // 是否显示内置组件
90106
}
91107
},
92108
methods: {
@@ -105,6 +121,7 @@
105121
anchorLink(to){
106122
107123
let query = to.query;
124+
108125
if (query && query.anchor) {
109126
110127
this.$nextTick(x => {
@@ -138,6 +155,17 @@
138155
})
139156
},
140157
158+
// select、checkbox、dropdown 等组件都是内置的，showHide=1 则开启
159+
enableHideComp(to){
160+
161+
let query = to.query;
162+
163+
if (query.showHide && query.showHide == 1){
164+
165+
this.showHide = true;
166+
}
167+
},
168+
141169
setFavicon(){
142170
143171
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
@@ -160,6 +188,9 @@
160188
$route(to,from){
161189
162190
this.anchorLink(to);
191+
192+
// 显示内置组件
193+
this.enableHideComp(to);
163194
}
164195
}
165196
}

‎examples/doc/dropdown/main.vue‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<template>
2+
<div>
3+
<div>
4+
<h3>单选功能</h3>
5+
<v-dropdown v-model="options1"
6+
>
7+
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
8+
</v-dropdown>
9+
10+
<h3>多选功能</h3>
11+
<v-dropdown v-model="options2"
12+
is-multiple
13+
>
14+
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
15+
</v-dropdown>
16+
17+
<h3>设置尺寸</h3>
18+
<v-dropdown v-model="options3"
19+
size="small"
20+
>
21+
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
22+
</v-dropdown>
23+
24+
<v-dropdown v-model="options3"
25+
size="middle"
26+
>
27+
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
28+
</v-dropdown>
29+
30+
<v-dropdown v-model="options3"
31+
size="large"
32+
>
33+
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
34+
</v-dropdown>
35+
36+
<h3>操作功能</h3>
37+
111
38+
<v-dropdown v-model="options4"
39+
show-operation
40+
is-multiple
41+
@on-filter-confirm="filterConfirm"
42+
@on-filter-rest="filterRest"
43+
>
44+
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
45+
</v-dropdown>
46+
</div>
47+
</div>
48+
</template>
49+
50+
<script>
51+
export default{
52+
53+
data(){
54+
55+
return {
56+
57+
options1: [
58+
{value: 0, label: '张三'},
59+
{value: 1, label: '李四'},
60+
{value: 2, label: '王二'}
61+
],
62+
63+
options2: [
64+
{value: 0, label: '张三'},
65+
{value: 1, label: '李四'},
66+
{value: 2, label: '王二'}
67+
],
68+
69+
options3: [
70+
{value: 0, label: '张三'},
71+
{value: 1, label: '李四'},
72+
{value: 2, label: '王二'}
73+
],
74+
75+
options4: [
76+
{value: 0, label: '张三'},
77+
{value: 1, label: '李四'},
78+
{value: 2, label: '王二'}
79+
],
80+
}
81+
},
82+
83+
methods:{
84+
85+
filterConfirm(option){
86+
87+
console.log('on-filter-confirm',option)
88+
},
89+
90+
filterRest(option){
91+
92+
console.log('on-filter-rest',option)
93+
},
94+
}
95+
96+
}
97+
</script>

‎examples/doc/select/main.vue‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<div>
3+
<div>
4+
<h3>基本功能</h3>
5+
<v-select name="basic"
6+
v-model="selectReportTypes1"
7+
placeholder="姓名"
8+
>
9+
</v-select>
10+
11+
<h3>多选功能</h3>
12+
<v-select name="basic"
13+
is-multiple
14+
v-model="selectReportTypes2"
15+
placeholder="姓名"
16+
>
17+
</v-select>
18+
19+
<h3>单选设置尺寸</h3>
20+
<v-select name="basic"
21+
v-model="selectReportTypes3"
22+
placeholder="姓名"
23+
size="small"
24+
>
25+
</v-select>
26+
<v-select name="basic"
27+
v-model="selectReportTypes3"
28+
placeholder="姓名"
29+
size="middle"
30+
>
31+
</v-select>
32+
<v-select name="basic"
33+
v-model="selectReportTypes3"
34+
placeholder="姓名"
35+
size="large"
36+
>
37+
</v-select>
38+
39+
<h3>多选设置尺寸（目前多选尺寸下拉框未实现）</h3>
40+
<v-select name="basic"
41+
v-model="selectReportTypes3"
42+
placeholder="姓名"
43+
is-multiple
44+
size="small"
45+
>
46+
</v-select>
47+
<v-select name="basic"
48+
v-model="selectReportTypes3"
49+
placeholder="姓名"
50+
is-multiple
51+
size="middle"
52+
>
53+
</v-select>
54+
<v-select name="basic"
55+
v-model="selectReportTypes3"
56+
placeholder="姓名"
57+
is-multiple
58+
size="large"
59+
>
60+
</v-select>
61+
</div>
62+
</div>
63+
</template>
64+
65+
<script>
66+
export default{
67+
68+
data(){
69+
70+
return {
71+
72+
selectReportTypes1: [
73+
{value: 0, label: '张三'},
74+
{value: 1, label: '李四'},
75+
{value: 2, label: '王二'}
76+
],
77+
78+
selectReportTypes2: [
79+
{value: 0, label: '张三'},
80+
{value: 1, label: '李四'},
81+
{value: 2, label: '王二'}
82+
],
83+
84+
selectReportTypes3: [
85+
{value: 0, label: '张三'},
86+
{value: 1, label: '李四'},
87+
{value: 2, label: '王二'}
88+
],
89+
}
90+
}
91+
92+
}
93+
</script>

‎examples/doc/table/complex-header-filters.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
:::demo 复杂表头表格使用筛选功能和简单表头表格使用方式类似，区别是 `filters` 以及 `filterMultiple`配置 是通过 `titleRows` 设置，详情见demo
2+
```html
3+
4+
<template>
5+
<div>
6+
<v-table
7+
is-horizontal-resize
8+
style="width:100%"
9+
:columns="columns"
10+
:title-rows="titleRows"
11+
:table-data="tableData"
12+
:filter-method="filterMethod"
13+
></v-table>
14+
</div>
15+
</template>
16+
17+
<script>
18+
19+
export default{
20+
name: 'complex-header-filters',
21+
data(){
22+
return {
23+
tableData: [],
24+
columns: [
25+
{field: 'name', title: '姓名', width: 80, columnAlign:'center',isResize:true},
26+
{field: 'gender', title: '手机号码', width: 50,columnAlign:'center',isResize:true},
27+
{field: 'hobby', title: '爱好', width: 150,columnAlign:'center',isResize:true},
28+
{field: 'address', title: '地址',width: 280,isResize:true}
29+
],
30+
titleRows:[
31+
[
32+
{fields:["name","gender"],title:"基础信息", titleAlign: 'center', colspan: 2},
33+
{fields: ['hobby'], title: '爱好', titleAlign: 'center',rowspan: 2},
34+
{fields: ['address'], title: '地址', titleAlign: 'center',rowspan: 2}
35+
],
36+
[
37+
{fields: ['name'], title: '姓名', titleAlign: 'center',
38+
filterMultiple: true,
39+
filters: [{
40+
label: '孙伟',
41+
value: '孙伟',
42+
}, {
43+
label: '吴伟',
44+
value: '吴伟',
45+
}, {
46+
label: '周伟',
47+
value: '周伟',
48+
}]},
49+
{fields: ['gender'], title: '性别', titleAlign: 'center',
50+
filterMultiple: false,
51+
filters: [{
52+
label: '男',
53+
value: '男',
54+
}, {
55+
label: '女',
56+
value: '女',
57+
}]}
58+
]
59+
]
60+
}
61+
},
62+
methods: {
63+
64+
// 数据筛选
65+
filterMethod(filters){
66+
67+
let tableData = this.getTableData();
68+
69+
// filter gender
70+
if (Array.isArray(filters.gender)){
71+
72+
tableData = tableData.filter(item => item.gender === filters.gender[0])
73+
}
74+
75+
// filter name
76+
if (Array.isArray(filters.name)){
77+
78+
tableData = tableData.filter(item => filters.name.indexOf(item.name) > -1);
79+
}
80+
81+
this.tableData = tableData;
82+
},
83+
84+
getTableData(){
85+
86+
return [
87+
{"name":"赵伟","gender":"女","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
88+
{"name":"李伟","gender":"女","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
89+
{"name":"孙伟","gender":"男","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
90+
{"name":"周伟","gender":"女","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
91+
{"name":"吴伟","gender":"男","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
92+
]
93+
}
94+
},
95+
96+
created(){
97+
98+
this.tableData = this.getTableData();
99+
}
100+
}
101+
</script>
102+
103+
```
104+
:::

0 commit comments

Comments
 (0)