fixed Table multiple head filter & sort bug

This commit is contained in:
梁灏 2018-03-26 14:28:11 +08:00
parent c1e965c371
commit 9ea47cb3d2
2 changed files with 148 additions and 20 deletions

View file

@ -3,7 +3,11 @@
<br><br><br><br><br>
<Table border :columns="columns1" height="500" :data="data1"></Table>
<br><br><br><br><br>
<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
<!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
<!--<br><br><br><br><br>-->
<Table border :columns="columns5" :data="data5"></Table>
<br><br><br><br><br>
<Table border :columns="columns6" :data="data5"></Table>
<br><br><br><br><br>
</div>
</template>
@ -17,7 +21,25 @@
key: 'name',
align: 'center',
width: 200,
fixed: 'left'
fixed: 'left',
filters: [
{
label: 'Joe',
value: 1
},
{
label: 'John',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.name === 'Joe';
} else if (value === 2) {
return row.name === 'John Brown';
}
}
},
{
title: 'Other',
@ -27,7 +49,8 @@
title: 'Age',
key: 'age',
align: 'center',
width: 200
width: 200,
sortable: true
},
{
title: 'Address',
@ -47,7 +70,8 @@
title: 'Building',
key: 'building',
align: 'center',
width: 200
width: 200,
sortable: true
},
{
title: 'Door No.',
@ -210,12 +234,111 @@
city: 'Ottawa',
zip: 100000
}
]
],
columns5: [
{
title: 'Date',
key: 'date',
sortable: true
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age',
sortable: true
},
{
title: 'Address',
key: 'address'
}
],
data5: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
],
columns6: [
{
title: 'Date',
key: 'date'
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age',
filters: [
{
label: 'Greater than 25',
value: 1
},
{
label: 'Less than 25',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.age > 25;
} else if (value === 2) {
return row.age < 25;
}
}
},
{
title: 'Address',
key: 'address',
filters: [
{
label: 'New York',
value: 'New York'
},
{
label: 'London',
value: 'London'
},
{
label: 'Sydney',
value: 'Sydney'
}
],
filterMethod (value, row) {
return row.address.indexOf(value) > -1;
}
}
],
}
},
mounted () {
const data = [];
for (let i = 0; i < 100; i++) {
for (let i = 0; i < 20; i++) {
data.push({
key: i,
name: 'John Brown',