ant design vue 表格Table使用
1.嵌套子表
<a-table
rowKey="arcId"
:columns="columns"
:dataSource="loadData"
@expand="handldOnExpand"
:loading="tableLoading"
>
<span slot="action" slot-scope="text, record">
<a v-if="record.status !=0" @click="getarcListByStaus(record)">填表归档</a>
<a-divider v-if="record.status !=0" type="vertical" />
<a v-if="record.status !=0" @click="getarcListByStaus2(record)">上传归档</a>
<a v-else @click="updateByStaus(record.arcId)">取消归档</a>
</span>
<a-table
slot="expandedRowRender" slot-scope="record,text"
:columns="innerColumns"
:data-source="record.newchildren"
:pagination="false"
:showHeader="false"
>
<span slot="operation" slot-scope="text,record">
<a v-if="record.status !=0" @click="getarcListByStaus2(record)">上传归档</a>
<a v-else @click="updateByStaus(record.arcId)">取消归档</a>
</span>
</a-table>
</a-table>
handldOnExpand(expanded, record) {
console.log(expanded,record);
if (!expanded) return
if (record.children && record.children.length > 0) return
const id = record.arcId
getArcList(Object.assign({ parentid: id })).then((res) => {
const children = res.rows || []
this.loadData.forEach(item =>{
if(item.arcId === id){
item.newchildren=children
this.loadData = [...this.loadData]
}})
})
},
2.给表格加上loading
<a-table
rowKey="arcId"
:columns="columns"
:dataSource="loadData"
@expand="handldOnExpand"
:loading="tableLoading"
>
</a-table>
this.tableLoading = true
this.tableLoading = false
3.某一列排序
{
title: '项目编号',
dataIndex: 'number',
align: 'center',
sorter: (a, b) => a.number.localeCompare(b.number),
},