kui-vue
Version:
A high quality UI Toolkit built on Vue.js 2.0
103 lines (101 loc) • 2.19 kB
Markdown
<cn>
#### 表头分组
columns[n] 可以内嵌 children，以渲染分组表头。
</cn>
```vue
<template>
<Table :data="data" :columns="columns" bordered :height="300" :width="1800" @change="change">
<a slot="action">action</a>
</Table>
</template>
<script>
export default{
data() {
const data = [];
for (let i = 0; i < 10; i++) {
data.push({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
});
}
return {
data,
columns:[
{
title: 'Name',
key: 'name',
width: 100,
fixed: 'left',
},
{
title: 'Other',
children: [
{
title: 'Age',
key: 'age',
sorter:true,
},
{
title: 'Address',
children: [
{
title: 'Street',
key: 'street',
},
{
title: 'Block',
children: [
{
title: 'Building',
key: 'building',
},
{
title: 'Door No.',
key: 'number',
},
],
},
],
},
],
},
{
title: 'Company',
children: [
{
title: 'Company Address',
key: 'companyAddress',
},
{
title: 'Company Name',
key: 'companyName',
},
],
},
{
title: 'Gender',
key: 'gender',
width: 80,
fixed: 'right',
},
]
}
},
methods:{
change(filters,{ key, order }){
console.log(filters,key,order)
this.data.sort((a,b) => {
return order=='asc'? b[key]-a[key] : a[key]-b[key]
})
},
}
}
</script>
```