ant中的table行列不对齐问题,以及换行,隐藏等问题

注意: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;
  }
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值