99 lines
2.0 KiB
Vue
99 lines
2.0 KiB
Vue
<template>
|
||
<a-card
|
||
:active-tab-key="key"
|
||
:bodyStyle="{ padding: 0 }"
|
||
:bordered="false"
|
||
:tab-list="tabList"
|
||
@tabChange="key => onTabChange(key, 'key')"
|
||
>
|
||
<a-table :columns="columns" :data-source="data" :pagination="false" />
|
||
</a-card>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
key: '1',
|
||
tabList: [
|
||
{
|
||
key: '1',
|
||
tab: '新建项目',
|
||
},
|
||
{
|
||
key: '2',
|
||
tab: '正在签约项目',
|
||
},
|
||
{
|
||
key: '3',
|
||
tab: '完成签约项目',
|
||
},
|
||
{
|
||
key: '4',
|
||
tab: '项目进度',
|
||
},
|
||
],
|
||
|
||
columns: [
|
||
{
|
||
title: '区域',
|
||
dataIndex: 'area',
|
||
},
|
||
{
|
||
title: '项目名称',
|
||
dataIndex: 'title',
|
||
},
|
||
{
|
||
title: '户数',
|
||
dataIndex: 'count',
|
||
},
|
||
{
|
||
title: '时间',
|
||
dataIndex: 'date',
|
||
},
|
||
],
|
||
data: [
|
||
{
|
||
key: '1',
|
||
area: '海曙区',
|
||
title: '曙光电影院地块',
|
||
count: 13,
|
||
date: '2021-01-01',
|
||
},
|
||
{
|
||
key: '2',
|
||
area: '江北区',
|
||
title: '大庆新村地块旧城区改建项目',
|
||
count: 322,
|
||
date: '2021-01-01',
|
||
},
|
||
{
|
||
key: '3',
|
||
area: '宁海县',
|
||
title: '桥头胡街道旧城区改造华驰文教地块',
|
||
count: 1,
|
||
date: '2021-01-01',
|
||
},
|
||
{
|
||
key: '4',
|
||
area: '慈溪市',
|
||
title: '七二三南延道路工程',
|
||
count: 1,
|
||
date: '2021-01-01',
|
||
},
|
||
{
|
||
key: '5',
|
||
area: '北仑区',
|
||
title: '原粮食局宿舍楼1号、2号楼（太河路北延工程）',
|
||
count: 32,
|
||
date: '2021-01-01',
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
onTabChange(key, type) {
|
||
this[type] = key;
|
||
},
|
||
},
|
||
};
|
||
</script> |