Skip to content

Commit

Permalink
1、支持条件过滤功能 #18 #94 -- 已完成
Browse files Browse the repository at this point in the history 
2、Table 组件回到顶部触发时机，由数据改变时触发更改为分页时触发 -- 已完成
3、Table 组件提供手动回到顶部的方法 `scrollToTop()` -- 已完成
4、Pagination 组件修复当浏览器大小改变，dropdown 错位的问题 #102 -- 已完成
  • Loading branch information
黄书伟 committed Jan 30, 2018
1 parent 8191590 commit 3cdd043
Show file tree
Hide file tree
Showing 66 changed files with 2,292 additions and 1,046 deletions.
6 changes: 4 additions & 2 deletions examples/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,18 @@ Vue.component('anchor', anchor);

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

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

Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)
Vue.component(VCheckbox.name, VCheckbox)
Vue.component(VCheckboxGroup.name, VCheckboxGroup)
Vue.component(VSelect.name, VSelect)
Vue.component(VDropdown.name, VDropdown)



Expand Down
33 changes: 32 additions & 1 deletion examples/comp/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,21 @@
</li>
</ul>

<template v-if="showHide">
<a class="main-wrapper-sidebar-link" href="javascript:javascript:void(0);">内置组件</a>
<ul class="menu-sub">
<li>
<router-link to="/select">Select 选择</router-link>
</li>
<li>
<router-link to="/checkbox">Checkbox 多选</router-link>
</li>
<li>
<router-link to="/dropdown">Dropdown 下拉</router-link>
</li>
</ul>
</template>

</li>
</ul>
</div>
Expand Down Expand Up @@ -86,7 +101,8 @@
data(){
return {
showBackTop: false,
catalogData: []
catalogData: [],
showHide:false // 是否显示内置组件
}
},
methods: {
Expand All @@ -105,6 +121,7 @@
anchorLink(to){
let query = to.query;
if (query && query.anchor) {
this.$nextTick(x => {
Expand Down Expand Up @@ -138,6 +155,17 @@
})
},
// select、checkbox、dropdown 等组件都是内置的，showHide=1 则开启
enableHideComp(to){
let query = to.query;
if (query.showHide && query.showHide == 1){
this.showHide = true;
}
},
setFavicon(){
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
Expand All @@ -160,6 +188,9 @@
$route(to,from){
this.anchorLink(to);
// 显示内置组件
this.enableHideComp(to);
}
}
}
Expand Down
97 changes: 97 additions & 0 deletions examples/doc/dropdown/main.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<template>
<div>
<div>
<h3>单选功能</h3>
<v-dropdown v-model="options1"
>
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
</v-dropdown>

<h3>多选功能</h3>
<v-dropdown v-model="options2"
is-multiple
>
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
</v-dropdown>

<h3>设置尺寸</h3>
<v-dropdown v-model="options3"
size="small"
>
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
</v-dropdown>

<v-dropdown v-model="options3"
size="middle"
>
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
</v-dropdown>

<v-dropdown v-model="options3"
size="large"
>
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
</v-dropdown>

<h3>操作功能</h3>
111
<v-dropdown v-model="options4"
show-operation
is-multiple
@on-filter-confirm="filterConfirm"
@on-filter-rest="filterRest"
>
<div style="color:blue;cursor: pointer;">点击这里<i class="v-icon-down-dir"></i></div>
</v-dropdown>
</div>
</div>
</template>

<script>
export default{
data(){
return {
options1: [
{value: 0, label: '张三'},
{value: 1, label: '李四'},
{value: 2, label: '王二'}
],
options2: [
{value: 0, label: '张三'},
{value: 1, label: '李四'},
{value: 2, label: '王二'}
],
options3: [
{value: 0, label: '张三'},
{value: 1, label: '李四'},
{value: 2, label: '王二'}
],
options4: [
{value: 0, label: '张三'},
{value: 1, label: '李四'},
{value: 2, label: '王二'}
],
}
},
methods:{
filterConfirm(option){
console.log('on-filter-confirm',option)
},
filterRest(option){
console.log('on-filter-rest',option)
},
}
}
</script>
93 changes: 93 additions & 0 deletions examples/doc/select/main.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<template>
<div>
<div>
<h3>基本功能</h3>
<v-select name="basic"
v-model="selectReportTypes1"
placeholder="姓名"
>
</v-select>

<h3>多选功能</h3>
<v-select name="basic"
is-multiple
v-model="selectReportTypes2"
placeholder="姓名"
>
</v-select>

<h3>单选设置尺寸</h3>
<v-select name="basic"
v-model="selectReportTypes3"
placeholder="姓名"
size="small"
>
</v-select>
<v-select name="basic"
v-model="selectReportTypes3"
placeholder="姓名"
size="middle"
>
</v-select>
<v-select name="basic"
v-model="selectReportTypes3"
placeholder="姓名"
size="large"
>
</v-select>

<h3>多选设置尺寸（目前多选尺寸下拉框未实现）</h3>
<v-select name="basic"
v-model="selectReportTypes3"
placeholder="姓名"
is-multiple
size="small"
>
</v-select>
<v-select name="basic"
v-model="selectReportTypes3"
placeholder="姓名"
is-multiple
size="middle"
>
</v-select>
<v-select name="basic"
v-model="selectReportTypes3"
placeholder="姓名"
is-multiple
size="large"
>
</v-select>
</div>
</div>
</template>

<script>
export default{
data(){
return {
selectReportTypes1: [
{value: 0, label: '张三'},
{value: 1, label: '李四'},
{value: 2, label: '王二'}
],
selectReportTypes2: [
{value: 0, label: '张三'},
{value: 1, label: '李四'},
{value: 2, label: '王二'}
],
selectReportTypes3: [
{value: 0, label: '张三'},
{value: 1, label: '李四'},
{value: 2, label: '王二'}
],
}
}
}
</script>
104 changes: 104 additions & 0 deletions examples/doc/table/complex-header-filters.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
:::demo 复杂表头表格使用筛选功能和简单表头表格使用方式类似，区别是 `filters` 以及 `filterMultiple`配置 是通过 `titleRows` 设置，详情见demo
```html

<template>
<div>
<v-table
is-horizontal-resize
style="width:100%"
:columns="columns"
:title-rows="titleRows"
:table-data="tableData"
:filter-method="filterMethod"
></v-table>
</div>
</template>

<script>
export default{
name: 'complex-header-filters',
data(){
return {
tableData: [],
columns: [
{field: 'name', title: '姓名', width: 80, columnAlign:'center',isResize:true},
{field: 'gender', title: '手机号码', width: 50,columnAlign:'center',isResize:true},
{field: 'hobby', title: '爱好', width: 150,columnAlign:'center',isResize:true},
{field: 'address', title: '地址',width: 280,isResize:true}
],
titleRows:[
[
{fields:["name","gender"],title:"基础信息", titleAlign: 'center', colspan: 2},
{fields: ['hobby'], title: '爱好', titleAlign: 'center',rowspan: 2},
{fields: ['address'], title: '地址', titleAlign: 'center',rowspan: 2}
],
[
{fields: ['name'], title: '姓名', titleAlign: 'center',
filterMultiple: true,
filters: [{
label: '孙伟',
value: '孙伟',
}, {
label: '吴伟',
value: '吴伟',
}, {
label: '周伟',
value: '周伟',
}]},
{fields: ['gender'], title: '性别', titleAlign: 'center',
filterMultiple: false,
filters: [{
label: '男',
value: '男',
}, {
label: '女',
value: '女',
}]}
]
]
}
},
methods: {
// 数据筛选
filterMethod(filters){
let tableData = this.getTableData();
// filter gender
if (Array.isArray(filters.gender)){
tableData = tableData.filter(item => item.gender === filters.gender[0])
}
// filter name
if (Array.isArray(filters.name)){
tableData = tableData.filter(item => filters.name.indexOf(item.name) > -1);
}
this.tableData = tableData;
},
getTableData(){
return [
{"name":"赵伟","gender":"女","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
{"name":"李伟","gender":"女","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
{"name":"孙伟","gender":"男","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
{"name":"周伟","gender":"女","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
{"name":"吴伟","gender":"男","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
]
}
},
created(){
this.tableData = this.getTableData();
}
}
</script>

```
:::
Loading

0 comments on commit 3cdd043

Please sign in to comment.