antd+vue是我目前项目的主流，在工作过程中，经常用到table组件。下面就记录一下工作中经常用到的部分知识点。

table组件

<a-table :dataSource="tableData":rowKey="(row) => row.id":scroll="{ y: 550 }"bordered:pagination="pagination"@change="changeTable":columns="columns":defaultExpandAllRows="true"v-if="tableData && tableData.length"></a-table>

1 实现table表格默认全部展开效果

上面的defaultExpandAllRows是默认全部展开的意思。
具体展示效果如下：

为了能够实现全部展开的效果，还添加了v-if="tableData && tableData.length"

也就是说：通过以下两行代码就可以实现表格默认展开的效果了：
1.:defaultExpandAllRows="true"
2.v-if="tableData && tableData.length

2 实现自定义标题和自定义单元格内容

const columns = [{slots: { title: 'customTitle' },scopedSlots: { customRender: 'time' },width: 120,},
]

自定义标题：

<span slot="customTitle">创建时间</span>

自定义单元格内容：

<div slot="time" slot-scope="text, record">{{ record.creationTime }}
</div>

3 实现日期差

getDiffTime(newdate, olddate) {if (!newdate || !olddate) { return;}let new_date = new Date(newdate);let old_date = new Date(olddate);var subtime = (new_date - old_date) / 1000; //计算时间差,并将毫秒转化为秒var days = parseInt(subtime / 86400); //天  24*60*60*1000var hours = parseInt(subtime / 3600) - 24 * days; //小时  60*60  总小时数-过去小时数=现在小时数var mins = parseInt((subtime % 3600) / 60); //分钟 - (day*24)  以60秒为一整份  取余 剩下秒数 秒数/60就是分钟数var secs = parseInt(subtime % 60); //以60秒为一整份  取余  剩下秒数return `${days ? days + '天' : ''}${hours ? hours + '时' : ''}${mins ? mins + '分' : ''}`;
},

使用方法：getDiffTime(record.responseEndTime, record.creationTime)

4.表格数据获取及分页

this.loading = true;
getWarningList({ ...this.pagination, ...this.queryParam }).then((data) => {if (data.success) {let res = data.result;this.tableData = res.items || [];const pagination = { ...this.pagination };pagination.total = res.totalCount || 0;this.pagination = pagination;}}).finally(() => {this.loading = false;});

5.分页组件切换

changeTable(pagination, filters, sorter) {const pager = { ...this.pagination };pager.current = pagination.current;pager.pageSize = pagination.pageSize;this.pagination = pager;this.getList();
},

6.页面跳转

handleDetail(row) {this.$router.push({path: '/warning/detail',query: {id: row.id},});
},

7.删除某一条数据

handleDel(row,index) {this.$confirm({title: '提示',content: '此操作将永久删除该条数据, 是否继续?',okText: '确定',cancelText: '取消',onOk: () => {this.loading = true;delMenuRoute(row.id).then(() => {this.$message.success('删除成功!');//如果是不分页的表格，则可以直接通过下面的方法重新刷新此页面的数据this.filterSearch();//如果是分页的表格，则为了交互性良好，则需要进行下面的判断if(this.tableData.length==1&&this.pagination.current>1){this.pagination.current--;this.filterSearch();}else{this.tableData.splice(index,1);	}}).finally(() => {this.loading = false;});},onCancel: () => {this.$message.info('取消删除');},});
},

后续再进行补充。