antd+vue
is the mainstream of my current project. In the process of work, I often use the table
component. Let’s record some knowledge points that are often used in work.
table component
<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 Realize the effect of all table tables being expanded by default
The abovedefaultExpandAllRows
means to expand everything by default.
The specific display effect is as follows:
In order to achieve the full expansion effect, v-if="tableData && tableData.length"
That is to say: the following two lines of code can achieve the effect of table expansion by default:
1.:defaultExpandAllRows="true"
2.v-if="tableData && tableData.length
2 Implement custom titles and custom cell contents
const columns = [
{
slots: {
title: 'customTitle' },
scopedSlots: {
customRender: 'time' },
width: 120,
},
]
Custom title:
<span slot="customTitle">创建时间</span>
Custom cell content:
<div slot="time" slot-scope="text, record">
{
{
record.creationTime }}
</div>
3 Realization date difference
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 + '分' : ''
}`;
},
Instructions:getDiffTime(record.responseEndTime, record.creationTime)
4. Table data acquisition and paging
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.Paging component switching
changeTable(pagination, filters, sorter) {
const pager = {
...this.pagination };
pager.current = pagination.current;
pager.pageSize = pagination.pageSize;
this.pagination = pager;
this.getList();
},
6. Page jump
handleDetail(row) {
this.$router.push({
path: '/warning/detail',
query: {
id: row.id},
});
},
7. Delete a certain piece of data
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('取消删除');
},
});
},
Will add more later.