a-table：表格组件常用功能记录——基础积累

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('取消删除');
    },
  });
},

后续再进行补充。