125 lines
2.4 KiB
Vue
125 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<com-table :columns="columns" :data-source="data" :row-selection="rowSelection" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
import ComTable from '_c/Table'
|
|
|
|
const columns = [
|
|
{
|
|
title: 'Name',
|
|
dataIndex: 'name',
|
|
key: 'name'
|
|
},
|
|
{
|
|
title: 'Age',
|
|
dataIndex: 'age',
|
|
key: 'age',
|
|
width: '12%'
|
|
},
|
|
{
|
|
title: 'Address',
|
|
dataIndex: 'address',
|
|
width: '30%',
|
|
key: 'address'
|
|
}
|
|
]
|
|
|
|
const data = [
|
|
{
|
|
key: 1,
|
|
name: 'John Brown sr.',
|
|
age: 60,
|
|
address: 'New York No. 1 Lake Park',
|
|
children: [
|
|
{
|
|
key: 11,
|
|
name: 'John Brown',
|
|
age: 42,
|
|
address: 'New York No. 2 Lake Park'
|
|
},
|
|
{
|
|
key: 12,
|
|
name: 'John Brown jr.',
|
|
age: 30,
|
|
address: 'New York No. 3 Lake Park',
|
|
children: [
|
|
{
|
|
key: 121,
|
|
name: 'Jimmy Brown',
|
|
age: 16,
|
|
address: 'New York No. 3 Lake Park'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
key: 13,
|
|
name: 'Jim Green sr.',
|
|
age: 72,
|
|
address: 'London No. 1 Lake Park',
|
|
children: [
|
|
{
|
|
key: 131,
|
|
name: 'Jim Green',
|
|
age: 42,
|
|
address: 'London No. 2 Lake Park',
|
|
children: [
|
|
{
|
|
key: 1311,
|
|
name: 'Jim Green jr.',
|
|
age: 25,
|
|
address: 'London No. 3 Lake Park'
|
|
},
|
|
{
|
|
key: 1312,
|
|
name: 'Jimmy Green sr.',
|
|
age: 18,
|
|
address: 'London No. 4 Lake Park'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
key: 2,
|
|
name: 'Joe Black',
|
|
age: 32,
|
|
address: 'Sidney No. 1 Lake Park'
|
|
}
|
|
]
|
|
|
|
const rowSelection = {
|
|
onChange: (selectedRowKeys: any, selectedRows: any) => {
|
|
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
|
|
},
|
|
onSelect: (record: any, selected: any, selectedRows: any) => {
|
|
console.log(record, selected, selectedRows)
|
|
},
|
|
onSelectAll: (selected: any, selectedRows: any, changeRows: any) => {
|
|
console.log(selected, selectedRows, changeRows)
|
|
}
|
|
}
|
|
|
|
export default defineComponent({
|
|
// name: 'TableTree',
|
|
components: {
|
|
ComTable
|
|
},
|
|
setup() {
|
|
return {
|
|
columns,
|
|
data,
|
|
rowSelection
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|