235 lines
No EOL
8.5 KiB
Vue
235 lines
No EOL
8.5 KiB
Vue
<template>
|
|
<div>
|
|
<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>-->
|
|
<br><br><br><br><br>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
columns1: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
align: 'center',
|
|
width: 200,
|
|
fixed: 'left'
|
|
},
|
|
{
|
|
title: 'Other',
|
|
align: 'center',
|
|
children: [
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
align: 'center',
|
|
width: 200
|
|
},
|
|
{
|
|
title: 'Address',
|
|
align: 'center',
|
|
children: [
|
|
{
|
|
title: 'Street',
|
|
key: 'street',
|
|
align: 'center',
|
|
width: 200
|
|
},
|
|
{
|
|
title: 'Block',
|
|
align: 'center',
|
|
children: [
|
|
{
|
|
title: 'Building',
|
|
key: 'building',
|
|
align: 'center',
|
|
width: 200
|
|
},
|
|
{
|
|
title: 'Door No.',
|
|
key: 'door',
|
|
align: 'center',
|
|
width: 200
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Company',
|
|
align: 'center',
|
|
children: [
|
|
{
|
|
title: 'Company Address',
|
|
key: 'caddress',
|
|
align: 'center',
|
|
width: 200
|
|
},
|
|
{
|
|
title: 'Company Name',
|
|
key: 'cname',
|
|
align: 'center',
|
|
width: 200
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'Gender',
|
|
key: 'gender',
|
|
align: 'center',
|
|
width: 200,
|
|
fixed: 'right',
|
|
// fixed: 'left'
|
|
}
|
|
],
|
|
columns2: [
|
|
{
|
|
title: 'Name',
|
|
key: 'name',
|
|
width: 100,
|
|
fixed: 'left'
|
|
},
|
|
{
|
|
title: 'Age',
|
|
key: 'age',
|
|
width: 100,
|
|
fixed: 'right',
|
|
sortable: true
|
|
},
|
|
{
|
|
title: 'Province',
|
|
key: 'province',
|
|
width: 100
|
|
},
|
|
{
|
|
title: 'City',
|
|
key: 'city',
|
|
width: 100
|
|
},
|
|
{
|
|
title: 'Address',
|
|
key: 'address',
|
|
width: 200
|
|
},
|
|
{
|
|
title: 'Postcode',
|
|
key: 'zip',
|
|
width: 100
|
|
},
|
|
{
|
|
title: 'Action',
|
|
key: 'action',
|
|
fixed: 'right',
|
|
width: 120,
|
|
render: (h, params) => {
|
|
return h('div', [
|
|
h('Button', {
|
|
props: {
|
|
type: 'text',
|
|
size: 'small'
|
|
}
|
|
}, 'View'),
|
|
h('Button', {
|
|
props: {
|
|
type: 'text',
|
|
size: 'small'
|
|
}
|
|
}, 'Edit')
|
|
]);
|
|
}
|
|
}
|
|
],
|
|
data1: [],
|
|
data4: [
|
|
{
|
|
name: 'John Brown',
|
|
age: 18,
|
|
address: 'New York No. 1 Lake Park',
|
|
province: 'America',
|
|
city: 'New York',
|
|
zip: 100000
|
|
},
|
|
{
|
|
name: 'Jim Green',
|
|
age: 24,
|
|
address: 'Washington, D.C. No. 1 Lake Park',
|
|
province: 'America',
|
|
city: 'Washington, D.C.',
|
|
zip: 100000
|
|
},
|
|
{
|
|
name: 'Joe Black',
|
|
age: 30,
|
|
address: 'Sydney No. 1 Lake Park',
|
|
province: 'Australian',
|
|
city: 'Sydney',
|
|
zip: 100000
|
|
},
|
|
{
|
|
name: 'Jon Snow',
|
|
age: 26,
|
|
address: 'Ottawa No. 2 Lake Park',
|
|
province: 'Canada',
|
|
city: 'Ottawa',
|
|
zip: 100000
|
|
},
|
|
{
|
|
name: 'John Brown',
|
|
age: 18,
|
|
address: 'New York No. 1 Lake Park',
|
|
province: 'America',
|
|
city: 'New York',
|
|
zip: 100000
|
|
},
|
|
{
|
|
name: 'Jim Green',
|
|
age: 24,
|
|
address: 'Washington, D.C. No. 1 Lake Park',
|
|
province: 'America',
|
|
city: 'Washington, D.C.',
|
|
zip: 100000
|
|
},
|
|
{
|
|
name: 'Joe Black',
|
|
age: 30,
|
|
address: 'Sydney No. 1 Lake Park',
|
|
province: 'Australian',
|
|
city: 'Sydney',
|
|
zip: 100000
|
|
},
|
|
{
|
|
name: 'Jon Snow',
|
|
age: 26,
|
|
address: 'Ottawa No. 2 Lake Park',
|
|
province: 'Canada',
|
|
city: 'Ottawa',
|
|
zip: 100000
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted () {
|
|
const data = [];
|
|
for (let i = 0; i < 100; i++) {
|
|
data.push({
|
|
key: i,
|
|
name: 'John Brown',
|
|
age: i + 1,
|
|
street: 'Lake Park',
|
|
building: 'C',
|
|
door: 2035,
|
|
caddress: 'Lake Street 42',
|
|
cname: 'SoftLake Co',
|
|
gender: 'M',
|
|
});
|
|
}
|
|
this.data1 = data;
|
|
}
|
|
}
|
|
</script> |