fixed Table multiple head filter & sort bug
This commit is contained in:
parent
c1e965c371
commit
9ea47cb3d2
2 changed files with 148 additions and 20 deletions
|
@ -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',
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue