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('取消删除');},});
},
后续再进行补充。
