ant design vue 表格Table使用

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) => {
        // console.log("aaaaaaaaa");
        const children = res.rows || []
        this.loadData.forEach(item =>{
          if(item.arcId === id){
          // 将子表数据存放到父项的newchildren对象中
            item.newchildren=children
            // console.log(item.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),
},