90 lines
3 KiB
Vue
90 lines
3 KiB
Vue
<template>
|
|
<Table border :columns="columns6" :data="data5"></Table>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
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;
|
|
}
|
|
}
|
|
],
|
|
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'
|
|
}
|
|
],
|
|
}
|
|
}
|
|
}
|
|
</script>
|