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