注意:ant中的table表格,列的宽度如果设置了,那么该列就是设置的宽度;那些没设置宽度的列,列宽=(总宽度 - 设置的列宽总和)/ 未设置的列的个数,即平均宽度;
1.如果表格只是设置了:scroll="{ x : 1550}",不设置y,那么表格行列是可以对齐的
2.但是遇到需求想要将表头给固定掉,这时候就需要设置高度y,这时候就出现列不对齐的情况
高度等于浏览器可视区减去一定的筛选部分高度
此时列表行列不对齐
3.这时候只需要将每一列设置宽度,余下其中一列 不设置宽度,同时将x宽度设置必列的宽度的总和还要大就可以了(大力出奇迹)
分割
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
4.关于某一行的内容太多,未设置列宽度,那么就会被平均,导致有换行问题;
如下:
处理1:如果想强制换行
把这两句加在对应控制table样式文件中,就不会分行了
.ant-table-thead > tr > th{
white-space:nowrap;
}
.ant-table-row td{
white-space:nowrap;
}
处理2:给该列设置宽度,超出部分隐藏,配合toolTip做提示即可;
总结:设置x,y滚动固定;列设置宽度,余下最长的一列不设置宽度,超出隐藏;
<a-table
:loading="loading"
:columns="columns"
:data-source="data"
class="components-table-demo-nested"
@change="onChangeTable"
:scroll="{x:1300,y:y}"
:pagination="pagination"
:locale="locale"
>
const columns = [
{
title: "任务名称",
// dataIndex: "distributeName",
scopedSlots: { customRender: "distributeName" },
key: "distributeName",
ellipsis: true,
},
{
title: "分发方",
dataIndex: "distributorName",
key: "distributorName",
},
{ title: "接收方", scopedSlots: { customRender: "receiver" }, key: "receiver", ellipsis: true },
{
title: "关联凭证",
key: "distributeAssDoc",
scopedSlots: { customRender: "distributeAssDoc" },
ellipsis: true,
},
{
title: "是否周期",
key: "isPeriod",
scopedSlots: { customRender: "isPeriod" },
},
<a slot="distributeAssDoc" slot-scope="text">
<a-tooltip placement="topLeft">
<template slot="title">{{text.distributeAssDoc}}</template>
<span v-if="text.distributeAssDoc" class="decBox">{{text.distributeAssDoc}}</span>
</a-tooltip>
<a-tag
v-if="!text.distributeAssDoc"
color="geekblue"
@click="addUpgradeNum(text.id,text.key)"
>输入凭证</a-tag>
</a>
.ant-table-tbody > tr > td a .decBox {
font-size: 12px !important;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 550 !important;
color: rgba(53, 58, 64, 1) !important;
line-height: 20px;
}